Knockout JS knockout validation plugin

Question

I have a viewModel with a property for a select. The property is placed inside a ko.validatedObservable({}). I am separating different Views with different ko.validatedObservable() sections. My inputs are validating fine except that the select is validating from page load even though in init() I have messagesOnModified: true (because I dont want to show error messages when first loading the page). The first option has value="". I checked the markup and the data-orig-title="REQUIRED" is set while the other input controls has this attribute set to "" as it should be

Could someone point out why the select behaves differently? I should also add that I am generating the Select with razor @Html.DropDownListFor(x=>x.dest_provincia, Model.Items, new { data_bind="dest_provincia"}) This is a sample of the validation

(on the viewModel)

self.dest_provincia = ko.observable().extend({ required: { message: "REQUIRED"} });

and this is placed inside:

self.userValidation = ko.validatedObservable({
        rem_provincia: this.rem_provincia
)};

I have noticed that the validation is happening on the select because a change event is being triggered, but I don't know what is making it..? Update: I tried creating the select by razor, by looping on $.each in an ajax call and by filling an observableArray in knoackout. In any case the change event is trigger on page load...!?

I'm running into this same issue regarding <select> elements using Knockout JS. I am setup in a very similar way as you describe, using razor to build my select element and also to put into place the correct data-bind attributes. Do you happen to have an update or a resolution on anything related to this issue? I've contemplated trying to template it using Knockout instead of Razor, I'm just not sure if that's the issue. — letsgetsilly
– letsgetsilly, Commented Dec 3, 2012 at 20:38
One last question - what is the "change event" in Knockout Validation? How can I see when it is fired? — letsgetsilly
– letsgetsilly, Commented Dec 3, 2012 at 20:41
The way i made the validation happy was to create a <select> with data-bind="value: myvaluefield, optionsCaption: '--Select'">. This caption added the value="" which is required to make validation. — Manuel Valle
– Manuel Valle, Commented Jan 21, 2013 at 22:49

letsgetsilly · Accepted Answer · 2012-12-04 00:45:59Z

2

I managed to solve this one today.

The problem exists between the razor engine templating the select options, and then later binding the value of the selected element to Knockout.

Despite the fact that there is no user-inputted value in the select box, the default value, the "--select--" actually contains a value. In my case it was an empty string. Therefore, when I applied the knockout bindings, my viewmodel property was "updated" with the empty string value, and therefore validation fired.

To get around this in my case I set the default value of my model to be an empty string. Therefore when the bindings are applied, there is no valueHasMutated event fired on the Knockout observable, and thus no validation.

answered Dec 4, 2012 at 0:45

letsgetsilly

1,1963 gold badges11 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Knockout JS knockout validation plugin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related