检查HTML行输入是否为空

时间:2018-04-15 00:17:45

标签: javascript html html5

我是HTML和JavaScript世界的新手。基本上,我正在尝试验证HTML表格。

我想验证表单提交,如果表格行中的任何元素(输入或选择)具有值,则必须完成所有行元素。例如:

  • 如果一行中的所有元素(输入或选择)都为空,则表示确定
  • 如果一行中的所有元素(输入或选择)都已完成,则表示确定
  • 如果一行中只有1,2或3个元素(输入或选择)完成,那么它就不行(你必须完成所有这些或者没有完成),我想显示一个警告,表明所有的行元素必须完成。

我正在尝试帮助我了解如何通过在线搜索解决此问题。我正在努力调整以下代码来做到这一点:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

    <form method="post" id="myform" onsubmit="return validate(this);">
    <table>
        <thead>
            <tr>
                <th>type</th>
                <th>subtype</th>
                <th>quantity</th>
                <th>attachment</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <select name="q">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 1</option>
                    <option>option 2</option>
                    <option>option 3</option>
                </select>
            </td>
            <td>
                <select name="w">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 4</option>
                    <option>option 5</option>
                    <option>option 6</option>
                </select>               
            </td>
            <td>
                <input type="number" name="e" />
            </td>
            <td>
                <input type="file" name="r">
            </td>
        </tr>

        <tr>
            <td>
                <select name="t">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 1</option>
                    <option>option 2</option>
                    <option>option 3</option>
                </select>
            </td>
            <td>
                <select name="y">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 4</option>
                    <option>option 5</option>
                    <option>option 6</option>
                </select>               
            </td>
            <td>
                <input type="number" name="u" />
            </td>
            <td>
                <input type="file" name="i">
            </td>
        </tr>

        <tr>
            <td>
                <select name="o">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 1</option>
                    <option>option 2</option>
                    <option>option 3</option>
                </select>
            </td>
            <td>
                <select name="p">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 4</option>
                    <option>option 5</option>
                    <option>option 6</option>
                </select>               
            </td>
            <td>
                <input type="number" name="a" />
            </td>
            <td>
                <input type="file" name="s">
            </td>
        </tr>

        <tr>
            <td>
                <select name="d">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 1</option>
                    <option>option 2</option>
                    <option>option 3</option>
                </select>
            </td>
            <td>
                <select name="f">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 4</option>
                    <option>option 5</option>
                    <option>option 6</option>
                </select>               
            </td>
            <td>
                <input type="number" name="g" />
            </td>
            <td>
                <input type="file" name="h">
            </td>
        </tr>

        <tr>
            <td>
                <select name="j">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 1</option>
                    <option>option 2</option>
                    <option>option 3</option>
                </select>
            </td>
            <td>
                <select name="k">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 4</option>
                    <option>option 5</option>
                    <option>option 6</option>
                </select>               
            </td>
            <td>
                <input type="number" name="l" />
            </td>
            <td>
                <input type="file" name="m">
            </td>
        </tr>

        </tbody>
    </table>
    <input type="submit" value="submit" />
    </form>

    <script>
    function validate(frm) {
        var tb = frm.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];

        var trs = tb.getElementsByTagName("tr");
        for (var i=0; i < trs.length; i++) {

            var inputs = trs[i].getElementsByTagName("input");

            if (!validateEmpty(inputs[0]) || !validateEmpty(inputs[1])) {
                return false;
            }
        }
            return true;
    }

    function validateEmpty(obj) {
        if (obj.value == "") {
            alert("empty!");
            obj.select();
            return false;
        }
        return true;
    }
    </script>

</body>

你可以帮我解决这个问题吗? Thxs。

UPDATE!

<script>        
function validate(frm) {
    const trs = [...document.querySelectorAll('#myform tr')];
    const isValid = trs.every((tr) => {
      const inputs = [...tr.querySelectorAll('input')];
      const selects = [...tr.querySelectorAll('select')];
      if (
        inputs.every(input => input.value.length === 0) &&
        selects.every(select => select.selectedIndex === 0)
      ) {
        // valid:
        return true;
      }
      return (
        inputs.every(input => input.value.length > 0) &&
        selects.every(select => select.selectedIndex !== 0)
        alert("empty!");
      );
    });
}
</script>

1 个答案:

答案 0 :(得分:2)

非常简单,只需遍历所有trs,然后遍历内部的每个inputselect。使用Array方法使语法最简单:

const trs = [...document.querySelectorAll('#myform tr')];
const isValid = trs.every((tr) => {
  const inputs = [...tr.querySelectorAll('input')];
  const selects = [...tr.querySelectorAll('select')];
  if (
    inputs.every(input => input.value.length === 0) &&
    selects.every(select => select.selectedIndex === 0)
  ) {
    // valid:
    return true;
  }
  return (
    inputs.every(input => input.value.length > 0) &&
    selects.every(select => select.selectedIndex !== 0)
  );
});

我正在使用input.value.length而不仅仅是input.value的布尔检查,以便0的输入也会被接受为有效。

以下是使用Array.from的实时代码段,以防您使用的是古老的浏览器:

document.querySelector('#myform').addEventListener('submit', validate);
function validate(e) {
  e.preventDefault();
  const trs = Array.from(document.querySelectorAll('#myform tr'));
  const isValid = trs.every((tr) => {
    const inputs = Array.from(tr.querySelectorAll('input'));
    const selects = Array.from(tr.querySelectorAll('select'));
    if (
      inputs.every(input => input.value.length === 0) &&
      selects.every(select => select.selectedIndex === 0)
    ) {
      // valid:
      return true;
    }
    return (
      inputs.every(input => input.value.length > 0) &&
      selects.every(select => select.selectedIndex !== 0)
    );
  });
  console.log(isValid);
}
<form method="post" id="myform">
  <table>
    <thead>
      <tr>
        <th>type</th>
        <th>subtype</th>
        <th>quantity</th>
        <th>attachment</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <select name="q">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 1</option>
                    <option>option 2</option>
                    <option>option 3</option>
                </select>
        </td>
        <td>
          <select name="w">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 4</option>
                    <option>option 5</option>
                    <option>option 6</option>
                </select>
        </td>
        <td>
          <input type="number" name="e" />
        </td>
        <td>
          <input type="file" name="r">
        </td>
      </tr>

      <tr>
        <td>
          <select name="t">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 1</option>
                    <option>option 2</option>
                    <option>option 3</option>
                </select>
        </td>
        <td>
          <select name="y">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 4</option>
                    <option>option 5</option>
                    <option>option 6</option>
                </select>
        </td>
        <td>
          <input type="number" name="u" />
        </td>
        <td>
          <input type="file" name="i">
        </td>
      </tr>

      <tr>
        <td>
          <select name="o">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 1</option>
                    <option>option 2</option>
                    <option>option 3</option>
                </select>
        </td>
        <td>
          <select name="p">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 4</option>
                    <option>option 5</option>
                    <option>option 6</option>
                </select>
        </td>
        <td>
          <input type="number" name="a" />
        </td>
        <td>
          <input type="file" name="s">
        </td>
      </tr>

      <tr>
        <td>
          <select name="d">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 1</option>
                    <option>option 2</option>
                    <option>option 3</option>
                </select>
        </td>
        <td>
          <select name="f">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 4</option>
                    <option>option 5</option>
                    <option>option 6</option>
                </select>
        </td>
        <td>
          <input type="number" name="g" />
        </td>
        <td>
          <input type="file" name="h">
        </td>
      </tr>

      <tr>
        <td>
          <select name="j">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 1</option>
                    <option>option 2</option>
                    <option>option 3</option>
                </select>
        </td>
        <td>
          <select name="k">
                    <option disabled selected value> -- select an option -- </option>
                    <option>option 4</option>
                    <option>option 5</option>
                    <option>option 6</option>
                </select>
        </td>
        <td>
          <input type="number" name="l" />
        </td>
        <td>
          <input type="file" name="m">
        </td>
      </tr>

    </tbody>
  </table>
  <input type="submit" value="submit" />
</form>