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个）。

最佳答案

您可以通过checkValidity()方法检查表单控件的有效性，如果输入有效，该方法将返回true。但是，如果通过document.forms[0].checkValidity()在form元素上调用它，它将验证第二个输入-仍不可见，并返回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>