Jquery验证，以检查选择框unqiue和要求

Question

我已经使用jquery validate插件来检查选择框独特和必需。

然而，检查独特的完全不和检查所需的工作只对第一个选择框中工作，

如何解决这一问题？谢谢

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> 

更新时间： 我已经编辑我以前做过的js文件，我已经试过selectField0或selectField_0，仍然没有运气

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

}，

Answer 1

这是jQuery验证程序的常见问题。有解决这个问题的方法有两种：

方法一：

修改jQuery的验证插件，使其按照以下说明处理两种：http://www.codeboss.in/web-funda/2009/05/27/jquery-validation-for-array-of-input-elements/

方法2：

将验证器分别应用于每个选项：

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

上面的代码将当且仅当满足以下条件时才提交表格：

• 两个选择框都选择了项目。这符合“要求”的条件。

• 选择不一样，符合“独特”条件。

• 当用户关注选择框时，错误消失。

• 如果用户尝试没有上述提交条件是真提交，示出以下错误：

• 如果未选择一个或多个选择中，将“这些是必需的字段”消息显示。

• 如果两者均相等并且被选中，则“字段必须是唯一的”消息显示。