Javascript 检查HTML行输入是否为空_Javascript_Html

Javascript 检查HTML行输入是否为空

javascript html

Javascript 检查HTML行输入是否为空,javascript,html,Javascript,Html,我是HTML和JavaScript领域的新手。基本上，我正在尝试验证一个HTML表我想在表单提交时进行验证，如果表行上的任何元素（输入或选择）具有值，则必须完成所有行元素。例如：如果一行上的所有元素（输入或选择）都是空的，那么就可以了如果一行上的所有元素（输入或选择）都已完成，那么就可以了如果一行中只有1、2或3个元素（输入或选择）已完成，则不正常（必须全部完成或不完成），我想显示一个警报，指示所有行元素都必须完成我试图通过在线搜索帮助我理解如何解决这个问题。我正在努力调整以下代码

我是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>


类型
亚型
量
附件
--选择一个选项--
选择1
选择2
选择3
--选择一个选项--
选择4
备选案文5
备选案文6
--选择一个选项--
选择1
选择2
选择3
--选择一个选项--
选择4
备选案文5
备选案文6
--选择一个选项--
选择1
选择2
选择3
--选择一个选项--
选择4
备选案文5
备选案文6
--选择一个选项--
选择1
选择2
选择3
--选择一个选项--
选择4
备选案文5
备选案文6
--选择一个选项--
选择1
选择2
选择3
--选择一个选项--
选择4
备选案文5
备选案文6
功能验证（frm）{
var tb=frm.getElementsByTagName（“表”）[0].getElementsByTagName（“tbody”）[0]；
var trs=tb.getElementsByTagName（“tr”）；
对于（变量i=0；i



你能帮我解决这个问题吗？Thxs
更新
<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>


功能验证（frm）{
const trs=[…document.querySelectorAll（'#myform tr'）；
const isValid=trs.every（（tr）=>{
常量输入=[…tr.querySelectorAll（'input'）]；
const selects=[…tr.querySelectorAll（'select'）]；
如果(
inputs.every（input=>input.value.length==0）&&
选择.every（选择=>select.selectedIndex==0）
) {
//有效期：
返回true；
}
返回(
inputs.every（input=>input.value.length>0）&&
选择.every（选择=>select.selectedIndex！==0）
警报（“空！”）；
);
});
}
非常简单，只需迭代所有trs
，然后迭代每个输入
，然后在内部选择。使用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
的输入也将被视为有效
下面是一个使用数组的实时代码片段。如果您使用的是古老的浏览器，请改为使用数组：

document.querySelector（“#myform”）.addEventListener（'submit'，validate）；
功能验证（e）{
e、 预防默认值（）；
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'）；
如果(
inputs.every（input=>input.value.length==0）&&
选择.every（选择=>select.selectedIndex==0）
) {
//有效期：
返回true；
}
返回(
inputs.every（input=>input.value.length>0）&&
选择。每个（sel）