使用 jquery 验证器验证具有相同名称的多个文本框仅验证第一个输入

Posted 2023-05-09

【中文标题】使用 jquery 验证器验证具有相同名称的多个文本框仅验证第一个输入

【英文标题】：validating multiple textbox having same name with jquery validator validates only first input

【发布时间】：2013-03-22 06:54:57

【问题描述】：

我正在尝试使用 jquery 验证器验证具有相同名称的两个输入..

<script src='
            http://code.jquery.com/jquery-latest.min.js '></script>
            <script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js'></script>
            <script>
            $(document).ready(function()

            $('#frm').validate();

            $("[name=inp_text]").each(function()
            $(this).rules("add", 
            required: true,
            checkValue: true
             );   
           );

                $.validator.addMethod("checkValue", function(value, element) 
                var response = ((value > 0)&&(value <= 100))||((value == 'test1')||(value =='test2'));
               return response;
               , "invalid value");

            )

            </script>


            <form id='frm' method='post'>
            <input type='text' name='inp_text'/><br>
                <input type='text' name='inp_text'/><br>
            <input type='submit' name=''/>
            </frm>

但是当我运行这段代码时，它只会验证第一个输入，而第二个输入会被忽略

我也尝试过使用<input type='text' name='inp_text[]'/><br>，但还是不行。

我应该改变什么...？

提前致谢

【参考方案1】：

“我正在尝试使用 jquery 验证具有相同名称的两个输入 验证器..."

<input type='text' name='inp_text'/>
<input type='text' name='inp_text'/>

"但是当我运行这段代码时，它只验证第一个输入和第二个输入 输入被简单地忽略了"

type="text" 的两个input 字段不能具有相同的name，否则此插件将无法正常工作。 name 属性必须是唯一的。 （name 唯一的一个例外是，复选框或单选输入的“分组”将共享相同的name，因为相应的提交是单点数据。但是，name 必须仍然对于每组复选框和单选元素都是唯一的。）

“我应该改变什么...？”

使每个name 属性唯一。

<input type='text' name='inp_text[1]'/>
<input type='text' name='inp_text[2]'/>

然后使用“开始于”选择器，^=...

$("[name^=inp_text]").each(function () 
    $(this).rules("add", 
        required: true,
        checkValue: true
    );
);

工作演示：http://jsfiddle.net/PgLh3/

注意：当使用rules('add') 方法时，您也可以通过id 定位元素，但是对于这种情况，什么都没有解决，因为插件仍然需要一个唯一 name 在每个 input 元素上。

【讨论】：

非常感谢..你能解释一下为什么当我使用 inp_txt[] 时它不起作用..我想这个名字应该变得独一无二..还是我对这个假设有误.. ?

@dreamCoder，因为inp_text[] 与inp_text[] 完全相同。它将如何“变得独一无二”？我想我不完全明白你在问什么。

文档中没有unique这样的东西。

@OzanKurt，众所周知缺少此文档。但是，您可以随意检查源代码并亲自查看 name 属性是该插件如何跟踪所有正在验证的表单元素的方式。 Also see this demo where the plugin fails when the name attribute is duplicated: jsfiddle.net/ed3vxgmy/

【参考方案2】：

添加类似如下规则或消息的配置

multipleInputSharedName: 
        inp_text: true
    

更改 jquery.validate.js 中的代码 方法名：元素

替换以下内容

if ( this.name in rulesCache || !validator.objectLength( $( this ).rules() ) ) 
                return false;
            

以下

if ( (!validator.settings.multipleInputSharedName[this.name] && this.name in rulesCache) || !validator.objectLength( $( this ).rules() ) ) 
                return false;
            

【参考方案3】：

是的，JQuery validate 只会验证第一次出现。 您对文本框使用不同的名称。 要么 您可以使用相同的名称但不同的 ID。 并根据id申请check。

$("#myform").validate( 规则： #id_of_field： 必需：真，检查值：真 );

【讨论】：

是的，当两个字段包含相同的名称时，jQuery Validate 插件将不起作用；只有第一个字段将验证。但是，id 在.validate() 中声明规则是无效的，并且绝对会破坏一切。见：jsfiddle.net/tpg7M

对不起，您可以使用以下数组名称。$('#myform').validate( rules : 'data[]': required: true, minlength: 1 );

【参考方案4】：

朋友们！

为了验证文本框/复选框/选择同名 使用以下它对我来说很好。

这里的 'ctryId' 是选择框的名称。

function validateCountry()
    inp = document.getElementsByTagName("select");
    for ( var i = 0; i < inp.length; ++i )    
        if (inp[i].name =="ctryId" && inp[i].value=='')
            alert('plesae select a country!');
                return false;
            
        
    return true;
 

这里 'minVal' 是文本框的名称

function validateMinimumVal()
    inp = document.getElementsByTagName("TEXT");
    for ( var i = 0; i < inp.length; ++i )    
        if (inp[i].name =="minVal" && inp[i].value=='')
            alert('plesae Add a MINIMUM VALUE!!');
                return false;
            
        
    return true;
 

希望这会有所帮助！ 贾根

【讨论】：

这没有回答预期的问题。