jquery validate not working with chosen plugin for multiple select

Question

I am trying to make a select box of type multiple as required using jquery validate but its not working. Here is my code

$(document).ready(function(){
    $('#test').chosen();
    $('#testForm').validate();
    $('#validateIt').click(function(){
        if($('#testForm').valid())
            alert('Valid');
        else
            alert('Invalid');
    });
});

html

<form id="testForm">
<select required style="width: 165px;" id="test" name="test" class="chzn-select multiselect" multiple="multiple">
    <optgroup label="Lab1"><option value="2">Some Program</option></optgroup>
</select>
<input type="button" id="validateIt" value="Run"/>
</form>

jsfiddle: http://jsfiddle.net/jm8Dd/

score 15 · Accepted Answer · answered Sep 16 '13 at 11:18

15

The problem here is actually quite simple. The jQuery-Validator plugin ignores hidden input fields per default.

Telling it not to ignore hidden fields should make it work.

$(document).ready(function(){
    $('#test').chosen();
    $('#testForm').validate({ ignore: ":hidden:not(select)" });
    $('#validateIt').click(function(){   
        if($('#testForm').valid())
            alert('Valid');
        else
            alert('Invalid');
    });
});

answered Sep 16 '13 at 11:18

Louis Huppenbauer

3,719
1
18
24

2

And to disable this feature for the entire form, simply `ignore: []`. See: http://stackoverflow.com/a/8565769/594235 – Sparky Sep 16 '13 at 15:24

score 0 · Answer 2 · answered Nov 25 '13 at 02:14

Try This. It allows for multiple select fields to be validated against each other.

<form id="esq">
<select required="required" name="sqa" id="sqa">
    <option value="1" selected="selected">What was your childhood nickname?</option>
    <option value="2">In what city did you meet your spouse/significant other?</option>
    <option value="3">What is the name of your favorite childhood friend?</option>
</select>
<select required="required" name="sqb" id="sqb">
    <option value="1">What was your childhood nickname?</option>
    <option value="2" selected="selected">In what city did you meet your spouse/significant other?</option>
    <option value="3">What is the name of your favorite childhood friend?</option>
</select>
<br />
<select required="required" name="sqc" id="sqc">
    <option value="1">What was your childhood nickname?</option>
    <option value="2">In what city did you meet your spouse/significant other?</option>
    <option value="3" selected="selected">What is the name of your favorite childhood friend?</option>
</select>
<br />

$(document).ready(function () {
$.validator.addMethod("notEqualTo", function (value, element, param) {
    var pArray = param.split(",");
    var rs = true;
    $.each(pArray, function (i, v) {
        if (rs == true) {
            rs = value != $("select[name=" + v + "]").val();
        };
    });
    return rs;
}, "You must choose three separate questions.");
$("#esq").validate({
    rules: {
        sqa: {
            notEqualTo: "sqb,sqc"
        },
        sqb: {
            notEqualTo: "sqa,sqc"
        },
        sqc: {
            notEqualTo: "sqa,sqb"
        }
    }
});

});

[http://jsfiddle.net/mrmupton/F6pfB/][1]

jquery validate not working with chosen plugin for multiple select

2 Answers2