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

Question

在我的网络应用程序中，我需要允许用户以一种形式输入无限的电子邮件地址，我的这个工作很好，它允许添加多个输入字段，并且由于我发现的以下问题而完美地验证了它们

How to validate array of inputs using validate plugin 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 类选择他们并提供 rules在 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>