在我的网络应用程序中，我需要允许用户以一种形式输入无限制的电子邮件地址我已经很好地工作了它允许添加多个输入字段并且通过我发现的以下问题完美地验证它们
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>
答案 0 :(得分：2)
以下是您的问题的解决方法。
解释 var validator = ...用于为输入提供email[]名称的模板。
然后使用email-input类选择它们，并在email函数中提供required类型和createValidation()回调，并提供自定义错误消息。
第一次调用该函数，并在每次向表单添加电子邮件输入时调用该函数。
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>
答案 1 :(得分：1)
您的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>');
});
答案 2 :(得分：1)
您可以尝试以下代码验证每个字段以进行必要的验证，还可以检查每个字段的有效电子邮件地址，并在此我使用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”，也为第一个字段添加了所以现在这个代码验证了所需的和电子邮件验证两者验证你也可以尝试下面的小提琴链接工作代码
fiddle link for working demo of required and email validate both validation