Question

我有一个生成5个表单的for循环。涉及很多动画，一次只显示一个表单。

我在其他页面上完成了基于 id 的验证（工作正常）。但是这里情况不同，因为循环我无法生成id。所以我的整个表单验证都是基于类的。

Myquestion：如何管理验证所有5种表单的单个函数。

如果您对我的基于ID的代码感兴趣 - ＆gt;这是小提琴（不起作用），只是基本的code

我的代码：为简单起见

for(i=0;i<=5;i++){
//html of my form in fiddle.
}

jquery的新手。我在jquery中理解$（this）概念。

希望我很清楚。没有插件PLZ。

Answer 1

首先，如果元素不唯一，请不要使用ID。

假设我们在这里有两种形式：

<form id="formOne" class="validForm" method="post">
    <input class="email" type="text"/>
    <input class="newsletter" type="checkbox"/>
    <input type="submit" value="Send"/>
    <p class="error"></p>
</form>

<form id="formTwo" class="validForm" method="post">
    <input class="email" type="text"/>
    <input class="newsletter" type="checkbox"/>
    <input type="submit" value="Send"/>
    <p class="error"></p>
</form>

重要的是要知道您的表单元素是您输入的父元素或选择元素。因此，当您使用$(this)时，您可以返回父母。

在jQuery中验证这一点：

$('.validForm').submit(function(event){
    var allInputsAreValid = true;
    var form = null;
    $('.validForm input').each(function(){
        switch($(this).attr('class')){
            case 'email':
                if($(this).val() == "") {
                    allInputsAreValid = false;
                }
            break;
            case 'newsletter':
                // optional?
            break;
        }
        if(!allInputsAreValid) {
            form = $(this).parent();
            break;
        }
    });
    if(allInputsAreValid){
      // everything is valid, transfer data
    } else {
        event.preventDefault();
        $(form).children('.error').text(errorMessage);
    }
});

Answer 2

你提到你不想要任何插件，这很好。但我认为您可以通过查看现有验证插件（如Parsley.js）的源代码了解一些内容。我做了，我用我学到的东西为我的表格做了一个更简单的验证。

基本上它通过data- *标签来定义每个字段所期望的输入类型，然后你可以像我假设你已经在做的那样循环遍历它们。

文档中的示例：

<input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />

希望它有所帮助。

验证循环生成的多个表单？

2 个答案: