Jquery 验证以选中选择框是否为必需

Jquery Validate to check selectbox unqiue and required

本文关键字：是否 选择 验证 Jquery      更新时间：2023-09-26

我已经使用 jquery 验证插件来选中唯一且必需的选择框。

但是，检查

唯一根本不起作用，并且所需的检查仅适用于第一个选择框，

如何解决这个问题？谢谢

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

}，

这是jQuery验证器的常见问题。有两种方法可以解决此问题：

方法1：

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

当且仅当满足以下条件时，上述代码才会提交表单：

  • 两个选择框都选择了项目。这符合"必需"条件。

  • 选择不同，满足"唯一"条件。

  • 当用户聚焦选择框时，错误将消失。

  • 如果用户尝试提交而未满足上述提交条件，则会显示以下错误：

  • 如果未选中一个或多个选择框，则会显示"这些是必填字段"消息。

  • 如果两者相等且处于选中状态，则会显示"字段必须是唯一的"消息。
相关文章：