I am working on an old project, with lots of jQuery and some jQuery plugins. One of the plugins is jQuery Validation Plugin, it validates the input according to provided custom rules. Another one is jQuery Selecter plugin which replaces the ordinary boring select tag with a nicely styled div that imitates the behavior of the select tag.
The problem I am having now is that the jQuery Selecter plugin hides the normal select tag, and instead the user interacts with a .selecter div, which then passes the selected values to the select tag somehow. The jQuery Validation Plugin, on the other hand tries to validate the select element only when the user interacts with this element directly (clicks on it). jQuery Validation Plugin is not triggered by the change of the value of the select tag. Which means that when a user clicks on the .selecter element and the jQuery Selecter plugin changes the value of select, jQuery Validation Plugin is not trying to check the value of the select element and still considers this element to be invalid.
So my question is, does anyone have any experience of using these two plugins together and making the validation plugin work when the selecter plugin changes the value of a select element?
The user is not interacting with the original select element because it's hidden, therefore none of the plugin's built-in validation events are triggered.
Can't see your JavaScript or your markup, so this answer is completely generic. However, you would write a change handler that fires when the select is changed and programmatically force validation on it.
$('#yourSelect').on('change', function() {
$(this).valid(); // force validation
});
$('#yourSelect') is a jQuery selector that targets the original hidden select element.