attaching jquery validation to replacement element

Question

I have an aspnet mvc form with a dropdown list in, that I am replacing with a jquery combobox.

the original dropdownlist has a client validation set against it - using the unobtrusive lib along with the standard jquery validate - , and I would like this validation attached to the combobox instead.

as part of the generation of the combobox, the name is removed from the dropper and instead set on a hidden field. the problem I am facing is that the validation message is then not showing for the combobox (hidden field), when it is invalid (empty in this case).

is there any way of hooking up the hidden field to validate as the dropdown list would have? I have tried a couple of things:

1. along with setting the name of the hidden field to the dropdown name - copying the data-val and data-val-required attributes over, but I am having no luck with that. I realise that as the hidden field is added dynamically the validator will not pick it up, but figured as the validation selects by name (afaik) it might just work. I have tried to re-parse the form so that it picks up the hidden field, but as the original rule remains - that doesnt seem to work.
2. I have also tried not using a hidden field and leaving the validation on the original dropper - which when items in the combobox are set , also sets the value in the dropper. this also doesnt work - i presume because the dropdown is hidden because if i leave it showing the validation works fine.

I am using bootstrap jquery combobox, which I have amended slightly to work with option groups

can anyone offer some assistance please?

thanks

Answer 1

The plugin you're using hides the input and replaces it with its own html. By default, jQuery validation does not validate hidden form controls but you can override this behavior by modifying the validator

$.validator.setDefaults({ 
    ignore: [] 
});

Note that if you have other hidden elements that you don't want validated, then you could give the element a class name

$.validator.setDefaults({ 
    ignore: ":hidden:not('.combobox')"
});

Note: Make sure that this script is outside the $(document.ready) function.