Shawson's Code Blog

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.

Maybe this is just me? Almost finished my Sales Entry form I’ve been tinkering with- adding a “Create Customer” dialogue, and every field bound as it should (using Knockout) except for 3; Address1, Address2 and Address3. The moment I changed Address1 to AddressHouseNumber, it started working- so i changed the other, and sure enough they all started working. I tripple checked for typo’s so it wasn’t that- the input fields looked like this;

<input data-bind="value: Address1, uniqueName: true" class=""/>
<input data-bind="value: Address2, uniqueName: true" class=""/>
<input data-bind="value: Address3, uniqueName: true" class=""/>

Weird! has any one else come across something like this?