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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

Arun的答案一如既往，但我认为你让它变得比它需要的更复杂。通过将提交按钮更改为实际HTML按钮，就像您可以设置样式一样，但是您喜欢和它会修复您的提交/验证问题。

<form action="./submit.php" method="post">
    <input type="text" name="foo" required="required" /><br/>
    <input type="text" name="bar" required="required" /><br/>
    <button class="box" type="submit">Submit</button>
</form>

这是一个FIDDLE，没有JS验证和crazypants按钮样式。

使用JQuery提交的简单表单是否包含必填字段的约束？

2 个答案: