0

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

我的链接

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

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

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

我的代码：为简单起见

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

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

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

4

2 回答 2

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);
    }
});
于 2013-08-26T14:25:41.880 回答
-3

你提到你不想要任何插件，这很好。但我认为你可以从Parsley.js等现有验证插件的源代码中学到一些东西。我做到了，我用我学到的东西对我的表单进行了更简单的验证。

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

文档中的示例：

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

希望能帮助到你。

于 2013-08-26T14:18:27.223 回答