验证输入数组只需要一个 1 随机字段填写 JavaScript答案

【问题标题】：Validate input array require only one 1 random fields are filled in JavaScript验证输入数组只需要一个 1 随机字段填写 JavaScript
【发布时间】：2017-12-16 07:40:25
【问题描述】：

我想使用 JavaScript 或 jQuery 验证来自 5 行字段的数组输入是否包含（用户名、类型、请求），条件是只需要一行并且它是随机行。因此，管理员可以在 Name 3 或 Name 5 填写它，只要管理员想填写它。

我仅使用name[] 和foreach 在PHP 中验证它是成功的，但在javascript 中我只能使用name+$i 来验证它。但这种验证与我的 PHP 要求是如此不同。

<form action="x" method="post">
<?php for ($i=1; $i<=5; $i++) { ?>
   <div>
      <span id="username-error<?php echo $i; ?>"></span>
      <label>Name <?php echo $i; ?></label>
      <select name="username[]" id="username<?php echo $i; ?>">
         <option>user 01</option>
         <option>user 02</option>
         <option>user 03</option>
      </select>
   </div>
   <div>
      <span id="type-error<?php echo $i; ?>"></span>
      <label>Type</label>
      <select name="type[]" id="type<?php echo $i; ?>">
         <option>type 01</option>
         <option>type 02</option>
         <option>type 03</option>
      </select>
   </div>
   <div>
      <span id="request-error<?php echo $i; ?>"></span>
      <label>Request</label>
      <input type="text" name="request[]" id="request<?php echo $i; ?>">
   </div>
   <button type="submit" id="submit">Submit</button>
<?php } ?>
</form>

我在submit上的jQuery代码点击：

$("#submit").on("click", function() {
for (var i = 1; i<=5; i++)
{
   var name = $("#username"+i).val();
   var type = $("#type"+i).val();
   var request = $("#request"+i).val();
   if (i == 1)
   {
      if (name == '') {
         $("#username-error"+i).html('User '+i+' name must be selected');
         return !1;
      }
      else if (type == '') {
         $("#type-error"+i).html('Type '+i+' name must be selected');
         return !1;
      }
      else if (request == '') {
         $("#request-error"+i).html('Request '+i+' name must be filled');
         return !1;
      }
   }
   // else ... no problem here only validate if name selected,
   // other fields like type and request must be selected and filled ...
}
});

我只能检查 Javascript 中固定字段（使用 i = 1 ）的表单是否为空。这意味着管理员必须在第一行填写它，所以这与我的 PHP 验证不同，它可以接受来自任何行的输入并且只需要一行。

我需要的 JavaScript 或 Jquery 验证规则：

1. After pages & form (5 rows -> name,type,request) load
2. Button submitted click without fill any form
   > Alert message (at least one row are filled !)
3. Fill 1 complete user, type and request data on random rows, example row 3 (Name 3)
4. Click on submit again, then success process data

因此，在验证规则中，它将与我的 PHP 具有相同的条件，它可以填充到管理员想要的任何行。不只是在i = 1。

我不知道如何签入 JavaScript 以验证只需要 1 行字段，它是随机行，所以我可以在 i = 3 或 i = 4 上填写它。

即使那是使用find('input[name="username[]"]').val())。

【问题讨论】：

标签： javascript jquery validation

【解决方案1】：

JS 没有 elseif。
只要循环，如果最后没有任何内容，就报错
给表单一个 ID 并使用提交事件
切勿在表单上使用 name="submit" 或 id="submit"

$("#formId").on("submit", function(e) {
  var name = "";
  $("#username-error").empty(); // clear errors

  $("[id^=username]").each(function() { // any field id=username*
    name = $(this).val();
    if ($.trim(name) !== '') return false; // stop loop, something was filled
  });
  if (name == "") { // no names were filled, alert on the first
    $("#username-error").html('At least one name must be selected'); // any of them, right?
    e.preventDefault(); // stop submission
  }
});

Full example - ignores other fields if name is not filled

Example that does not allow partial input

【讨论】：