使用驗證插件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”，因此現在此代碼既可以驗證必需的驗證，也可以驗證電子郵件的驗證，您還可以在提琴手的工作代碼下面嘗試

提要鏈接，用於必需和電子郵件的工作演示，同時驗證兩個驗證