使用验证插件jquery验证输入数组-显示每个输入的错误

Question

在我的webapp中，我需要允许用户以某种形式输入无限制的电子邮件地址，我可以很好地运行它，允许添加多个输入字段，并且由于以下问题我可以对其进行完美验证。

如何使用验证插件jQuery来验证输入数组

我已经阅读了问题，并对代码进行了更改，可以在控制台中确认其正在验证每个输入字段，并且不允许提交表单

我的问题是，它仅显示输入字段之一的“请输入您的电子邮件”。 例如，如果我有2个字段，并且在我提交表单时在第一个字段中输入电子邮件，则在第一个输入字段下显示第二个输入的“请输入您的电子邮件”

有什么可能的方法可以让所有人看到

这是我到目前为止的JS

    var validator = $(".webapp_auth_login_validation").validate({
        rules: {"email[]": "required"},
        messages: {"email[]": "Please enter you email"}
    }); 

$('.webapp_js_cu_email_new').click(function(){
 $('.webapp_js_cu_email_container').append('<div class="col-md-4 form-group"><label>Additional Email: <span class="text-danger">*</span></label><a href="javascript:void(0);" class="webapp_js_cu_email_remove" title="Remove field"> Remove </a><input type="text" name="email[]" class="form-control required"></div>');
});
$('.webapp_js_cu_email_container').on('click', '.webapp_js_cu_email_remove', function(e){
    e.preventDefault();
    $(this).parent('div').remove();
});

这是页面上的html

<div class="row webapp_js_cu_email_container">
<div class="col-md-4 form-group">                                   
        <label>Email Address:  <span class="text-danger">*</span></label> <a href="javascript:void(0);" class="webapp_js_cu_email_new" > Add </a>
        <input type="text" name="email[]" class="form-control required">                                                                
</div>                          

http://jsfiddle.net/gL1k4efa/6/

Answer 1

这是解决您问题的方法。

解释 var validator = ...用于为带有email[]名称的输入提供模板。

然后通过email-input类选择它们，并在createValidation()函数中提供带有email类型的规则和required回调-以及自定义错误消息。

每当您向表单添加电子邮件输入时，就会调用该函数。

 var emailCounter = 1; var validator = $(".webapp_auth_login_validation").validate({ rules: { "email[]": "required" }, messages: { "email[]": "Please enter you email" } }); var createValidation = function() { $(".email-input").each(function() { $(this).rules('remove'); $(this).rules('add', { email: true, required: true, messages: { email: "Not a valid email.", required: "Please enter an email adress." } }); }); } $('.webapp_js_cu_email_new').click(function() { $('.webapp_js_cu_email_container').append('<div class="col-md-4 form-group"><label>Additional Email: <span class="text-danger">*</span></label><a href="javascript:void(0);" class="webapp_js_cu_email_remove" title="Remove field"> Remove </a><input id="email[' + (emailCounter) + ']" type="text" name="email[' + (emailCounter) + ']" class="form-control required email-input"></div>'); // Increment input counter ++emailCounter; // Create validation createValidation(); }); $('.webapp_js_cu_email_container').on('click', '.webapp_js_cu_email_remove', function(e) { e.preventDefault(); $(this).parent('div').remove(); }); // Kick validation $(document).ready(function() { createValidation(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> <form class="webapp_auth_login_validation"> <div class="row webapp_js_cu_email_container"> <div class="col-md-4 form-group"> <label>Email Address: <span class="text-danger">*</span> </label> <a href="javascript:void(0);" class="webapp_js_cu_email_new"> Add </a> <input type="text" name="email[0]" class="form-control required email-input"> </div> </div> <input type="submit"> </form> 

Answer 2

您的JS代码正确，问题出在您的HTML代码上。 您说有电子邮件列表，然后需要数组，但必须为该数组设置索引，否则DOM格式不正确，验证程序将失败。

尝试为每个输入字段设置索引。

<div class="col-md-4 form-group">                                   
    <label>Email Address:  <span class="text-danger">*</span></label> <a href="javascript:void(0);" class="webapp_js_cu_email_new" > Add </a>
    <input type="text" name="email[0]" class="form-control required">                                                                
</div> 

在这里添加正确的索引：

$('.webapp_js_cu_email_new').click(function(){
 $('.webapp_js_cu_email_container').append('<div class="col-md-4 form-group"><label>Additional Email: <span class="text-danger">*</span></label><a href="javascript:void(0);" class="webapp_js_cu_email_remove" title="Remove field"> Remove </a><input type="text" name="email[+obtainIndex()+]" class="form-control required"></div>');
});

Answer 3

您可以尝试在下面的代码中对每个字段进行验证，以进行所需的验证，并对每个字段进行有效的电子邮件地址检查，在此过程中，我在每个元素中使用count变量添加索引，并且我创建了一个为电子邮件和必需的验证规则添加功能归档后每次都添加新归档。 该函数的名称为callToEnhanceValidate尝试以下代码，它将同时解决所需的和有效的电子邮件地址验证问题。

    <form class="webapp_auth_login_validation">

    <div class="row webapp_js_cu_email_container">
    <div class="col-md-4 form-group">                                   
            <label>Email Address:  <span class="text-danger">*</span></label> <a href="javascript:void(0);" class="webapp_js_cu_email_new" > Add </a>
            <input type="text" name="email[]" class="form-control required emailValidate">                                                                
    </div>
    </div>           
    <input type="submit">
    </form>



    <script type= text/javascript>
        var count = 1; 
             var validator = $(".webapp_auth_login_validation").validate({
                rules: {"email[]": "required"},
                messages: {"email[]": "Please enter you email"}
            }); 

            var callToEnhanceValidate=function(){
                $(".emailValidate").each(function(){
                    $(this).rules('remove');
                    $(this).rules('add', {
                        required: true,
                        email : true,
                        minlength:2,
 messages: {
                required: "Please enter you email"
            },
                    });
                })
            }
        $('.webapp_js_cu_email_new').click(function(){
            count++;
         $('.webapp_js_cu_email_container').append('<div class="col-md-4 form-group"><label>Additional Email: <span class="text-danger">*</span></label><a href="javascript:void(0);" class="webapp_js_cu_email_remove" title="Remove field"> Remove </a><input type="text" name="email['+count+']" class="form-control required emailValidate"></div>');
        callToEnhanceValidate();
        });

        $('.webapp_js_cu_email_container').on('click', '.webapp_js_cu_email_remove', function(e){
            e.preventDefault();
            $(this).parent('div').remove();
        });
    </script>

在此，我还在每个动态生成的字段以及第一个字段中添加了新类“ emailValidate”，因此现在此代码既可以验证必需的验证，也可以验证电子邮件的验证，您还可以在提琴手的工作代码下面尝试

提要链接，用于必需和电子邮件的工作演示，同时验证两个验证