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

Question

这些字段是用 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");
    }
});

Answer 1

两个问题:

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

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

3. 如果你改变text()至 val()在该代码中，您将只检查第一个 的值(text() 有点奇怪，与val() 和大多数其他 jQuery getter 的工作方式不同)。

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

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