Question

这是我的代码：

＆＃13;

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

＆＃13;

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

请填写此内容。

这也是我的新代码：

＆＃13;

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

＆＃13;

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

＆＃13;

请参阅？在未填充输入的情况下，该过程继续进行而不会抛出该错误。无论如何，我如何检查jQuery中填写的所有必需输入？

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

Answer 1

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

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

＆＃13;

$("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);
  }
})

＆＃13;

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

＆＃13;

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

＆＃13;

$("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;
}

＆＃13;

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

＆＃13;

我如何研究jQuery中的HTML限制？

1 个答案: