jquery 验证多个同名字段

lkaoscv7  于 2023-02-03  发布在  jQuery
关注(0)|答案(3)|浏览(130)

下面是我的HTML的一部分:

<div class="editor-field">
    <input id="ImmobilizationLength_1" name="ImmobilizationLength" type="text" value="">
</div>
....
*HTML Code*
....
<div class="editor-field">
    <input id="ImmobilizationLength_2" name="ImmobilizationLength" type="text" value="">
</div>

当我想用jQuery验证这些字段时,我添加了以下规则:

ImmobilizationLength: { required: true, digits: true }

提交表单时,仅验证第一个ImmobilizationLength字段。
我在stackoverflow上读到了另一个关于这个的问题,它建议使用:

$('[name="ImmobilizationLength"]').each(function(){
    $(this).rules("add", { required: true, digits: true } );   
});

但是,当我这样做时,我得到这个错误:

    • 类型错误:无法读取未定义**的属性"nodeName"

我该怎么办?

u3r8eeie

u3r8eeie1#

你不能有项目与这相同的id选择器将不再工作也如果他们有相同的名字当你发布这数据将不再是正确的.除非你使用namearray
喜欢

name="ImmobilizationLength[]"

例如

<div class="editor-field">
    <input id="input_1"  name="input_1" class="test" type="text" value="">
</div>

根据注解,一旦您更改了ID,就可以使用以选择器开头的

$('[id^="input_"]').each(...
....
*HTML Code*
....
<div class="editor-field">
       <input id="input_2"  name="input_2" class="test" type="text" value="">
</div>

我会根据类名给予它们一个类和规则

$.validator.addClassRules({
       test: {
           digits: true,
           required: true
       }
});
carvr3hs

carvr3hs2#

根据W3Schools,ID必须唯一:
"id属性指定HTML元素的唯一id。该id在HTML文档中必须是唯一的。"
http://www.w3schools.com/tags/att_standard_id.asp
由于标记无效,您的Javascript将无法按预期工作。更正标记后(通过创建唯一ID,并选择性地添加类),您将能够轻松验证您的唯一字段。
请注意,与ID不同,类可以重复。名称不应该重复,因为如果提交表单,每个字段的值将相互覆盖。
编辑:
重名仍然是个问题,如果你想使用each(),你需要使用一个可以重复的标识符,比如class。

$('[name="ImmobilizationLength"]').each(function(){ 
});

将成为

$('.test').each(function(){
});
ybzsozfc

ybzsozfc3#

下面是我解决类似问题的方法,虽然我没有验证,而是动态设置值,但是可以应用相同的基本逻辑:

function validateFieldValues( fields )
{
    if ( 'length' in fields ) 
    {
        // We got a collection of form fields
        for ( var x = 0; x < fields.length; x++ ) {
            doValidation( fields[x].value );
        }
    }
    else
    {
        // We got a single form field
        doValidation( fields.value );
    }
}

function submitHandler( oForm )
{
    // Get the element collection of <input> elements with the same name
    var someNameElmts = oForm.elements.someName;

    // *should* always exist.  But just in case...
    if ( someNameElmts ) {
        validateFieldValues( someNameElmts );
    } else {
        // deal with it
    }
}

在HTML中:

<form 
method="post" 
name="someForm" 
id="someFormID" 
action="/some/path" 
onsubmit="submitHandler(this);">

希望能有所帮助!

相关问题