JQuery Validate() method for JQueryUI AutoComplete drop down boxes, while using KnockoutJS


It seems to be a rare mix, but on my form I have fields which are bound at client side using KnockoutJS, in drop downs styled using jQueryUI, using the expirmental autoComplete variant, which I then want to validate using jquery Validate method, to ensure someone actually selects something from the drop down!

So my form field looks like this;

<select data-bind='options: lookUps.Titles, optionsCaption: "Select...", value: Title, uniqueName: true'></select>

I have the following javascript to add the combobox autocomplete functionality;

 $("select").combobox({
                selected: function (event, ui) {
                    $(ui.item.parentNode).change();
                }
            });

Again, you’ll notice there’s another hack here to make everything play together nicly (see my blog post here)

Finally, the validation fix;

$.validator.addMethod('selectValueSelected',
          function(value, element) {
              return this.optional(element) ||
                (value.indexOf("__ko.bindingHandlers.options.optionValueDomData__") == -1);
          }, "Please select an option");
        $.validator.addClassRules("mustPopulateDropdown", {
            selectValueSelected: true
        });

All you need do now is add the css class “mustPopulateDropdown” to your select tags and they will be validated.

  1. #1 by from here on September 6, 2012 - 18:27

    Hi there would you mind letting me know which webhost you’re working with? I’ve loaded your
    blog in 3 completely different internet browsers and I must say
    this blog loads a lot quicker then most. Can you recommend a good web hosting provider at a fair price?
    Thanks, I appreciate it!

(will not be published)