2017-02-22 75 views
1

这些字段是用JQuery创建的。如何验证具有多个名称[]数组的JQuery表单?

如何验证“aname []”字段的数组(您必须在进入下一步之前填写它们)?

了jQuery HTML:

input ="<input name='aname[]' id='1' placeholder='yourname1' type='text' required />"; 
input +="<input name='aname[]' id='2' placeholder='yourname2' type='text' required />"; 
input +="<input name='aname[]' id='3' placeholder='yourname3' type='text' required />"; 
$(".placeholder").append(input); 

JQuery的命令,试图让输入

$(document).ready(function() { 
    var items = $('input[name="items[]"]').text(); 
    if(items == ""){ 
     alert("fill this field"); 
    } 
}); 

回答

2

两个问题:

  1. text()检索一个元素的文本(如spandiv),而不是输入的值。要获取输入的值,请使用val。 (或者只是使用DOM元素,value属性。)

  2. 您需要运行检查以响应事件,而不仅仅是页面加载。

  3. 如果您在更改代码text()val(),您只需要检查第一一个的值(text()有点奇怪和作品不同val()和大多数其他的jQuery干将)。

所以如果你想检查个个被填充,你需要一个事件处理程序和某种类型的循环:

$(document).ready(function() { 
    $("selector-for-the-form").on("submit", function(e) { 
     $(this).find('input[name="items[]"]').each(function() { 
      if (this.value == "") { 
       this.focus();    // So the user knows which field... 
       alert("fill this field"); // ...although this may mess that up 
       e.preventDefault();  // Prevent form submission 
       return false;    // Stop looping 
      } 
     }); 
    }); 
}); 

当然,alert ISN”通常这种事情的用户体验最好。如果你进行主动验证并且通知不会打断用户并中断他们正在做的事情(例如更改输入的边界颜色和/或显示内联消息),通常会更愉快。 (也有很多插件可以帮助你做到这一点。)

+0

我刚用alert()进行测试。大多数时候我使用toastr。我想知道是否应该使用每个,但不知道如何,直到你的解释。伟大的信息:) – Sol

+1

我们需要做一个e.preventDefault(); ?这将停止表单提交。 – Sol

+1

@ user7480839:好的!是。这就是为什么我宣布'e'参数,但我忘了添加电话!现在,我们在“each”中加入了'return false;',以便在找到第一个有问题的字段时停止循环。 (如果使用toastr,你可能会也可能不想要)。 –

相关问题