如何在提交表单后，e.preventDefault()，运行 一些脚本并继续 html5 验证？

Question

我有经典的 HTML 形式。单击提交按钮后，我想要 运行 我的脚本，所以我在 jquery:

$(document).on('click', '.myForm #btnSubmit', function(e) {

    e.preventDefault();

    // some scripts

所以在发送表单之前我有 e.preventDefault();，在此之后 运行 是我的脚本....在我的脚本完成后，我想继续 html5 像必填字段一样的验证等...

我该如何继续？我试过 click() 但这是无稽之谈，因为它是循环 - 再次有 e.preventDefault(); 等等...

简而言之：客户点击提交按钮，我需要 运行 一些我的 javascript 脚本，如果结果没问题，那么我需要继续标准行为 - html5 验证。 ..

Answer 1

您可以通过使用 jQuery 选择器选择它然后调用 .submit().

来触发表单提交

所以整个代码看起来像这样：

$(document).on('click', '.myForm #btnSubmit', function(e) {

    e.preventDefault();

    // your scripts

    $(".myForm").submit();
}

但请注意，您使用此代码仍然可以在没有脚本的情况下提交表单，例如，通过使用 TAB 选择提交按钮然后单击 SPACE。

Answer 2

好的，知道了！

创建另一个 隐藏 输入类型提交，然后 运行 自己的脚本在其上触发 click()...

代码：

HTML:

<form>
    <input type='text' required>
    <input id='submitHidden' style='display: none' type='submit'>
    <input id='btnSubmit' type='submit'>
</form>

JQUERY:

$(document).on('click', '.myForm #btnSubmit', function(e) {

    e.preventDefault();

    // some scripts

    // if some script allow continue with html5 validation then:

    $("#submitHidden).click();

jsFiddle

Answer 3

您可以使用 html5 checkValidity() 检查 html5 表单有效性：

var $form = $('.myForm');

$form.on('click', '#btnSubmit', function(e) {
  e.preventDefault();

  // your scripts

  if ($form[0].checkValidity()) {
    $form.submit();
  }
});

想想看，您甚至不需要 e.preventDefault()，因为如果验证失败，您的表单将不会提交，所以如果您可以 运行 您的脚本，然后让html5 验证是否提交表单

如果你只想运行你的脚本，如果你的表单是有效的，那么你可以使用上面的函数和 if 并将你的脚本放在 if 中。