Question

I took the original ‘Cart editor’ example at http://knockoutjs.com/examples/cartEditor.html (jsFiddle – http://jsfiddle.net/rniemeyer/adNuR/) and added jquery validation plugin into it. I want to validate against the 1st Category select list to make it required. So I made the the following changes:

• made submit button just a straight type=submit input
• surrounded the controls in a <form>
• execute $("form").validate() at the end of script
• added class='required' in the <select>
• added uniqueName: true in data-bind

Here’s the jsFiddle I made: http://jsfiddle.net/niner/JXJtj/3/. So the validation will work if the category list has nothing in it. However, if I make a valid selection (i.e. Motorcycles), when I press ‘submit’, it still says ‘The field is required.’. Even if I selected all the other choices correctly, I still get validation error on the category select control. Can someone please take a look and let me know what I’m missing here?

Thanks.

Answer 1

None of your options have a value, so validation always fails because .val() always returns an empty string. You can give your options a value by adding optionsValue: "name" to your data-bind expression:

http://jsfiddle.net/gilly3/JXJtj/4/