0

How can I write a custom rule using knockout validation so two dropdowns trigger the same error message? The dropdown default values are -1 as you can see below but I'm struggling to get the error message working for both. The error message is correctly showing for the first dropdown (self.select1) when the value is -1 but I can't get it working for the second dropdown as well (self.select2)

view-model

self.select1 = ko.observable('-1');
self.select2 = ko.observable('-1');

mark up

<div data-bind="css: { valid: (select1.isModified() && select1.isValid()), requiredText: (select1.isModified() && !select1.isValid())}">
    <select data-bind="options: xxx1, optionsText: 'value', optionsValue: 'name', value: select1, event:{blur: function(){select1.isModified(true);}}"></select>
</div>    

<div data-bind="css: { valid: (select2.isModified() && select2.isValid()), requiredText: (select2.isModified() && !select2.isValid())}">
    <select data-bind="options: xxx2, optionsText: 'value', optionsValue: 'name', value: select2, event:{blur: function(){select2.isModified(true);}}"></select>
</div>    

error message

<div class="LV_validation_message_wrapper">
    <span role="alert" class="LV_validation_message " data-bind="if: select1.isModified() && !select1.isValid(),
                style: { display: select1.isModified() && !select1.isValid() ?'block':'none' }, 
                attr: { title: select1.error }, validationMessage: select1" title="error message" style="display: block;">error message</span>
</div>
1
  • are you looking for required field validation ? help me understand
    – super cool
    Aug 13, 2014 at 16:41

1 Answer 1

0

you can look into this tried in a simple approach which is readable and easy to understand

see working Fiddle

Sample view model :

function ViewModel() {
    var self = this;
    self.choiceval =ko.observable("");
    self.numberval =ko.observable("");
    var choices = [
        { id: 1, name: "one" },
        { id: 2, name: "two" },
        { id: 3, name: "three" }
    ];
     var numbers = [
        { id: 1, name: "one" },
        { id: 2, name: "two" },
        { id: 3, name: "three" }
    ];

    self.choices = ko.observableArray(choices);
    self.numbers = ko.observableArray(numbers);



    self.Validation = ko.validatedObservable([
        self.numberval.extend({ required: true }),
         self.choiceval.extend({ required: true })

    ]);


}
ko.applyBindings(new ViewModel());
2
  • thanks but this example shows each dropdown having it's own corresponding error message. I need the two dropdowns to only have one message. Aug 13, 2014 at 20:30
  • i.e. a credit card could have 2 dropdowns for the expiry date, month and year. But the one message would say 'please enter a valid expiry date' Aug 13, 2014 at 20:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.