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

Posted 2023-05-08

【中文标题】使用验证插件 jquery 验证输入数组 - 显示每个输入的错误

【英文标题】：validate array of inputs using validate plugin jquery - show errors for each input

【发布时间】：2016-08-31 03:27:33

【问题描述】：

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

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/

【问题讨论】：

分享更多代码详情

你还想看什么？

上面的代码是除了 jquery 和 validate js 文件之外的所有内容。上面的代码有效，但仅显示第一个字段的错误消息，我将尝试制作小提琴

jsfiddle.net/gL1k4efa/6

如果为空，则将其视为用户不想为该文本框发送电子邮件。这是一个可用性问题，他们可能不想/不知道删除备用文本框

【参考方案1】：

这是您的问题的解决方法。

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

然后通过 email-input 类选择它们，并在 createValidation() 函数中为 rules 提供 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>

【讨论】：

这实际上是有道理的，但是当我运行 sn-p 代码时，它只显示此字段是必需的，而不是所有电子邮件字段的“请输入您的电子邮件”

不用担心我从未想过的一件事是当输入字段被删除时会发生什么验证失败，因为输入字段不再存在jsfiddle.net/gL1k4efa/63 这似乎可以使用类，但我必须定义消息两次我喜欢一个函数定义一次并调用它两次的想法

【参考方案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>');
);

【讨论】：

只有第一个输入字段提供静态数字，其余由 jquery 提供

@Nathan 然后在 JS 代码中，您必须在 emails 数组中设置正确的索引位置。您应该创建一个函数来了解索引值并使用 email[index] 正确构建输入。并且会起作用:)

我不确定你的意思

@Nathan 您只需要确保您的所有输入都具有具有有效数组索引位置的属性“名称”。这是一个示例，具有正确的索引jsfiddle.net/hudkkkrz

在您提供的小提琴中，它只显示第一个字段的消息，没有其他字段

【参考方案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”，因此现在此代码验证必需和电子邮件验证这两个验证您也可以尝试下面的小提琴链接工作代码

fiddle link for working demo of required and email validate both validation

【讨论】：

尝试此操作时，只有第一个输入字段显示请输入您的电子邮件，我需要所有这些输入

您是否尝试过上面的小提琴链接，该链接显示了其他文件的消息“请输入有效的电子邮件地址。”如果您尝试输入简单的文本，它还会向您显示有效电子邮件地址的消息。

[img]i.imgur.com/izxJeas.png[/img] - 这不是我看到的 - 看到第一个字段显示请输入您的电子邮件

所以你想要的意思是在每个文件中你想要显示在第一个字段中显示的相同消息你能解释更多，以便我可以帮助你更多。

对于通过上面的代码添加到页面的每个输入字段，如果在提交表单时它没有任何文本，我希望它显示“请输入您的电子邮件” - 在当前阶段它只显示在第一个字段上，然后在其余部分显示“此字段是必需的”