How to check jQuery UI combobox values ​​using jQuery validation plugin?

Question

I added the combobox jQuery UI with remote source code to my form. Now I'm trying to check this with the jQuery Validation plugin (only values ​​from the list are allowed, the field is required).

I tried the standard approach:

$("#myform").validate({ focusInvalid: false, focusCleanup: true, rules: { cbCountry: { // combobox required: true } 

But still empty values ​​are allowed. What am I doing wrong?

Update . I tried following the @Mike_Laird recommendation below and I found that my custom method

 $.validator.addMethod('validComboboxValue', function (value) { }, ... 

not even called when applied to combobox jQuery UI. But when I assign the same standard text input method, it gets called.

Answer 1

validate.js requires a "name" in the tag when you use jqueryui autocomplete combobox. The generated code has no id and name attributes, so you need to add them as needed.

In the _create function for combobox you need to add:

 select = this.element.hide(), select_id = select.attr('id'), selected = select.children(":selected"), 

and

 input = $("<input>") .attr('id', select_id + '_combobox') .attr('name', select_id + '_combobox') .appendTo(wrapper) 

This, given HTML as follows:

 <select id="dropDownlist"> <option... </select> 

autocomplete-combobox will generate the required input element with id and name attributes set to dropDownlist_combobox

with this I have full control over this auto-generated htmls tag from jqueryui-autocomplete-combobox. Then you can apply validation rules to the input element ( dropDownlist-combobox ). It will look something like this:

 $('#dropDownlist_combobox').rules('add', { required: true, messages: { required: 'Please enter your combobox' } }); 

and voila :)

Using this, you will get an error message displayed between the input tag and the drop-down button. To fix this, you will need additional code:

 $.validator.setDefaults({ errorPlacement: function (error, element) { if (element.context.id.indexOf('_combobox') == -1) error.insertAfter(element); else error.appendTo(element.parent()); } }); 

All code for the example is available at http://jsfiddle.net/XhU78/

I hope to work for you :)

Answer 2

The main idea is to set the values ​​for each of the selection parameters, and then write a special verification method to check the parameter values. Something like the following user-defined method will make some selection only from the required drop-down list.

 jQuery.validator.addMethod( "selectComboboxCheck", function (value, element) { if (element.value === "0") {return false;} else return true; } "Required - select an option." ); 

Put class = "selectComboboxCheck" in the select tag to call this method. The selection options should look something like this:

 <option value = "1">1</option> 

Answer 3

Here I see two questions. You must use the name of the element first, not the identifier. Second: if I understand correctly, you think that you allowed empty <select> values, but this is not so. The selection is entered correctly after autocompletion, but when you pass an empty value to <input id="acId"> (eq delete content and press ESC), the change will not be transferred to <select> , which contains the content assigned before <input id="acId"> will be cleared.

In short, you should either check not for a choice, but automatically create an input, or somehow pass an empty value for the selection.

Using your fiddle, I tested the first approach: http://jsfiddle.net/RRH6t/1/

 //changes made //HTML: <select id="cbCity" name="cbCityName" style="display:none"> //JS: var input = this.input = $('<input id="acId" name="acName">') ... $("#fAddTeacher").validate({ debug : true, // for debugging rules: { cbCityName: { required: true }, acName : { required : true } } }); 

Answer 4

Just add a new custom method like this

 jQuery.validator.addMethod("selectComboboxCheck", function (value, element) { if ($(element).find(":selected").val() == -1) { return false; } else return true; }, "Required" ); 

and add create selection box as follows:

 <select id="dropDownlist" class="selectComboboxCheck"> <option value="-1">Select something</option> <option value="1">Car</option> <option value="2">Plane</option> </select> 

Now, when you select “Choose something,” the check will fail, otherwise it will happen. (verified with jquery 1.9.1)

Answer 5

I know this is an old topic, but I just needed to do more or less the same (albeit with a static source). The only problem with checking the select value is that the Validation plugin filters out hidden elements, and the Combobox code conveniently hides the original selection. However, nothing prevents us from telling the Validator to consider all elements, even hidden ones:

 $("#form").validate({ ignore: "" }); 

Ignore is a selector for filtering unnecessary items and defaults to :hidden . You can simply provide this when calling $.validator.setDefaults() and make it work for any validator instance. This works when submitting a form with the required and min attributes, it may take a little more effort to get this work of choice (for example, firing the focusout event).

UPDATE

To make it check also the change in value, and not just on the submit form, this is a bit more complicated, but it comes down to the following:

• In fact, only the required attribute is needed, not the min .
• Combobox code must be changed to accept a parameter with an empty value. Since this is just an example of jQueryUI, this should not be a problem.
• Select the first option in the list with an empty value.
• Combobox fires the focusout event when a state changes ( autocompleteselect , _removeIfInvalid ).