Geek asks and answers

Jquery validate to check selectbox unqiue and required

I used the jquery validation plugin to set the checkbox in the selection box unique and mandatory.

However, the uniqueness check does not work at all and the check is required only for the first selection window ,

How to fix it? Thanks 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 edited the js file I made earlier, and I tried selectField0 or selectField_0, but 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();

},

+3
source share
1 answer

This is a common jQuery validator issue. There are two ways to solve this problem:

Method1:

jQuery Validator , : http://www.codeboss.in/web-funda/2009/05/27/jquery-validation-for-array-of-input-elements/

Method2:

:

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
              }
         }
     });
 });

№ 3:

jQuery , , , , . , , " ", , , , . , , , .

, # 3 jQuery jQuery :

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" />

, :

  • . "" .

  • "" .

  • , .

  • , :

  • , " ".

  • , " ".
+4

More articles:


All Articles