如何验证具有多个name []数组的JQuery表单?

时间:2017-02-22 15:43:16

标签: javascript jquery html

这些字段是使用JQuery创建的。

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

JQuery to 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");
    }
});

1 个答案:

答案 0 :(得分:2)

两个问题:

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

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

  3. 如果您在该代码中将text()更改为val(),则只会检查第一个一个的值(text()是有点奇怪,与val()和大多数其他jQuery getter不同。

  4. 因此,如果您要检查所有是否已填写,则需要一个事件处理程序和某种循环:

    $(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通常不是这种事情的最佳用户体验。如果您进行主动验证并且通知不会刺激用户并中断他们正在做的事情直到您必须(例如更改输入边框的颜色和/或显示内联消息),通常会更愉快。 (还有很多插件可以帮助你做到这一点。)