Jquery Validate to check selectbox unqiue and required

javascript, jquery, jquery-validate

Solution

This is a common problem with the jQuery validator. There are two ways around this problem:

Method1:

Modify the jQuery Validator plug-in so that it handles both by following these instructions: http://www.codeboss.in/web-funda/2009/05/27/jquery-validation-for-array-of-input-elements/

Method2:

Apply the Validator to each select individually:

HTML:

<form id="insertResult" method="post" action="excelSQL.php" >
    <select id="selectField0" name="select[]" style="float:left" class="error">
        <option selected="" value="">Select one</option>
        <option value="Email">Email</option>
        <option value="1_Name2">1_Name2</option>
    </select>

    <select id="selectField1" name="select[]" style="float:left">
        <option selected="" value="">Select one</option>
        <option value="Email">Email</option>
        <option value="1_Name2">1_Name2</option>
    </select>
    ...
</form>

JavaScript:

 $("#insertResult").find("select").each(function() {
     $(this).validate({
         rules: {
             'select[]': {
                 required: true,
                 unique: true
              }
         }
     });
 });

Method #3:

While jQuery plugins can be quite valuable for the more basic tasks, in some cases, what you're trying to do may in fact be outside the scope of what the plug-in was designed to do. Whenever I hear solutions like "modify the library code", it makes me think that perhaps that library is just not for me. This depends on the complexity of the modifications, and the likelihood that my coworkers or successors may have trouble figuring out why things stopped working when they updated the plugin to the latest version.

Thus, method #3 sidesteps the jQuery validator altogether and only uses jQuery to facilitate the basic validation:

JavaScript:

    // submit handler for form
    $('#insertResult').submit(function(event) { 

        // if either field is not selected, show error and don't submit
        if( itemNotSelected( $('#selectField0'), $('#selectField1') ) == true )  { 

            $('.error2').css("display","block");
            event.preventDefault(); 
            return false;

        } else if( isEqual($("#selectField0"), $("#selectField1") ) == true ) {

            $('.error2').css("display","none");
            $('.error1').css("display","block");alert("afda")
            event.preventDefault(); 
            return false;

        } 
    });

    // hide error text on focus of element
    $('#selectField0, #selectField1').focus(function() {
        $('.error2, .error1').hide();

    });

// helper methods to check if both fields are equal
function isEqual(elem1, elem2) {
    return (elem1.find("option:selected").html() == 
            elem2.find("option:selected").html());
}

// helper methods to check if one field (or both) is not selected
function itemNotSelected(elem1, elem2) {
    return ( elem1.find("option:selected").html() == "Select one" || 
             elem2.find("option:selected").html() == "Select one" );
}

HTML:

<select id="selectField0" name="select[]" style="float:left" class="error">
    <option selected="" value="">Select one</option>
    <option value="Email">Email</option>
    <option value="1_Name2">1_Name2</option>
</select>

<select id="selectField1" name="select[]" style="float:left">
    <option selected="" value="">Select one</option>
    <option value="Email">Email</option>
    <option value="1_Name2">1_Name2</option>
</select>
<span class="error2" style="display:none">These are required fields</span>
<span class="error1" style="display:none">Fields must be unique</span>

<input type="submit" name="submit" value="submit" />

The above code will submit the form if and only if the following conditions are true:

- Both select boxes have items selected. This meets the "required" condition.

The selections are not the same and meets the "unique" condition.

When a user focuses the select box, the errors disappear.

If the user tries to submit without the above submit conditions being true, the following errors are shown:

If one or more select box is not selected, the "These are required fields" message shows.

- If both are equal and selected, the "Fields must be unique" message shows.

Problem

I have used the jquery validate plugin to check select box unique and required. However, check unique is not working at all and check required is only work for the first select box , how to fix this ? Thank you jquery ``` $("#insertResult").validate({ rules: { 'select[]': { required: true, unique: true } }, }); ``` html ``` <form id="insertResult" method="post" action="excelSQL.php" > <select id="selectField0" name="select[]" style="float:left"> <option selected="" value="">Select one</option> <option value="Email">Email</option> <option value="1_Name2">1_Name2</option> </select> <select id="selectField1" name="select[]" style="float:left"> <option selected="" value="">Select one</option> <option value="Email">Email</option> <option value="1_Name2">1_Name2</option> </select> </form> ``` Updated: I have edited the js file which i have done before and i have tried selectField0 or selectField_0 , still no luck ``` checkForm: function() { this.prepareForm(); for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) { if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) { for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) { this.check( this.findByName( elements[i].name )[cnt] ); } } else { this.check( elements[i] ); } } return this.valid(); ``` },

Original source