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

【问题标题】：validation for multiple forms generated by loop?验证循环生成的多个表单？
【发布时间】：2013-08-26 14:04:27
【问题描述】：

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

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

我的问题：我如何管理一个验证所有 5 个表单的函数。

如果你对我的基于 id 的代码感兴趣->这是小提琴（不工作），只是基本的code

我的代码：为简单起见

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

jquery 新手。我确实了解 jquery 中的 $(this) 概念。

希望我清楚。请不要插件。

【问题讨论】：

你在使它基于类的过程中遇到了什么问题？请向我们展示您的尝试。
@Bergi:ok 等待 5 分钟..我会调出一个小提琴..但我有很多动画..我正在寻找模块..只是一个想法..不是整个代码..我已经完成了验证..但不知道在这种情况下该怎么做...
您的 html 无效，请使用真实表单（带有<form>）标签并使用submit() jQuery 事件。这不是一个解决方案，但看起来更干净。
我正在使用一个 foreach 循环来生成一个表单..没有表单标签..它非常好..如果你愿意，我可以给你链接..staging.experiencecommerce.com/ecsite-v3/html/career.php

标签： javascript jquery forms validation

【解决方案1】：

首先，如果一个元素不是唯一的，请不要为其使用 ID。

假设我们这里有 2 个表单：

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

【讨论】：

是的，这是错误的，因为您想要一个表格。我试图教你一种心态，而不是你可以复制的东西。
很高兴听到，如果是这样，您可以将这种方式应用于您自己的情况。
如果可能的话，请看一下我的 html..我正在使用 href 进行 subitting ok..我还有一个插件 uplick.js 上传到 href click..ok 我会弄清楚的。 .看看我更新的问题中的链接..谢谢答案
如果您有 <a> 而不是 <form>，只需将提交更改为单击，选择器匹配 <a> 并将 event.preventDefault() 放在顶部。

【解决方案2】：

您提到您不需要任何插件，这很好。但我认为您可以通过查看现有验证插件（如Parsley.js）的源代码来学习一些东西。我做到了，并且我用我学到的知识对我的表单进行了更简单的验证。

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

文档中的示例：

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

希望对你有帮助。

【讨论】：