时间戳

首页 > 解决方案 > 如何调查 jQuery 中的 HTML 限制？

javascript - 如何调查 jQuery 中的 HTML 限制？

问题描述

这是我的代码：

<form>
  <div>
    <input type="text" required />
  </div>
  <br />
  <input type="submit" />
</form>

当您将该输入留空然后单击submit按钮时，HTML 会抛出：

请填写此文件。

这也是我的新代码：

$("input[type='submit']").on("click", function(){
  $("input[type='text']:first-child").hide(100);
  $("input[type='text']:last-child").show(100);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div>
    <input type="text" required />
    <br />
    <input type="text" required style="display:none;"/>
  </div>
  <br />
  <input type="submit" />
</form>

看？在未填充该输入时，该过程继续进行而不会引发该错误。无论如何，如何检查是否所有必需的输入都填写在 jQuery 中？

注意到我可以这样做：if ( $("input[type='text']:first-child).val() == "" ){}，但实际上表单中有很多输入（大约 21 个）。

标签： javascriptjqueryhtmlcss

解决方案

您可以通过方法检查表单控件的有效性，如果输入有效checkValidity()，该方法将返回。true但是，如果您在表单元素上调用它，通过document.forms[0].checkValidity()，它将验证第二个输入 - 它仍然是不可见的，并false 在尚未填充时返回。

因此，您可以做的一件事是在第一个文本输入时调用该函数，$("input[type='text']:first-child")[0].checkValidity()如果它返回 true，则继续执行其余的过程。

$("input[type='submit']").on("click", function(){
  if ($("input[type='text']:first-child")[0].checkValidity()) {
    $("input[type='text']:first-child").hide(100);
    $("input[type='text']:last-child").show(100);
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div>
    <input type="text" required />
    <br />
    <input type="text" required style="display:none;"/>
  </div>
  <br />
  <input type="submit" />
</form>

您可以更进一步，而不是专门选择第一个输入，而是选择所有可见字段并checkValidity()一个接一个地调用它们。

$("input[type='submit']").on("click", function(){
  if (checkValidityOfvisibleFields()) {
    $("input[type='text']:first-child").hide(100);
    $("input[type='text']:last-child").show(100);
  }
})

function checkValidityOfvisibleFields() {
  var isValid = true;
  $("input[type='text']:visible").each(function() {
    var isFieldValid = this.checkValidity();
    
    if(!isFieldValid) {
      isValid = false;
      return false; // Break.
    }
  });
  
  return isValid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div>
    <input type="text" required />
    <br />
    <input type="text" required />
    <br />
    <input type="text" required />
    <br />
    <input type="text" required style="display:none;"/>
  </div>
  <br />
  <input type="submit" />
</form>

推荐阅读