javascript - 使用 JQuery 提交简单表单并对必填字段进行限制？

Question

使用 $(this).closest('form').submit(); 对于必填字段来说效果不太好，因为无论表单内容如何，​​它都会强制提交。有没有一种简单的方法可以在提交表单之前确认特定字段已填写？

<form action="./submit.php" method="post">
    <input type="text" name="foo" required="required"/> <br/>
    <input type="text" name="bar" required="required"/> <br/>
    <input type="text" name="baz" required="required"/> <br/>
    <div class="box" onclick="$(this).closest('form').submit();">Submit</div>
</form>

我最好的想法是使用 .attr('required','required') 收集所有表单元素，迭代它们并确认某些值存在，但是有没有更好/更短的方法？

Answer 1

您可以使用checkValidity方法检查

var $form = $(this).closest('form');
if (!$form[0].checkValidity || $form[0].checkValidity()) {
    $form.submit();
}

$('a').click(function(e) {
  e.preventDefault();
  var $form = $(this).closest('form');
  if (!$form[0].checkValidity || $form[0].checkValidity()) {
    $form.submit();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input name="x" required />
  <br />
  <input name="y" required />
  <br />
  <input name="z" />
  <br />
  <a href="#">Test</a>
</form>