javascript - 如何仅在 HTML 表单验证成功时执行一组 JavaScript 代码

Question

我有一个带有一些字段和一个提交按钮的 HTML 表单。几个字段是必填的。我有一组 JavaScript 代码，仅当表单验证成功时我才需要执行这些代码。如果表单上存在一些验证错误，则 JavaScript 代码将不会执行。下面是示例代码:

<form id="sampleForm" method="post" action="">
<input type="text" id="firstname" required />
<input type="text" id="secondname" required />
<input type="submit" value="Submit" />
</form>
/*JavaScript*/
$("#sampleForm").submit(function(){
//Set of JavaScript code to execute if validation is success.
});

对我来说，上面的 JavaScript 代码不起作用。请帮忙!

Answer 1

在您的评论中:

But if i use $("#sampleForm").submit() to submit the form, the form gets submitted but if i write function inside submit() ($("#sampleForm").submit(function(){ //Set of JavaScript code to execute if validation is success. });) then nothing happens !

当触发 submit 事件时会调用该函数，但当控件无效时不会触发该事件，因为不会提交表单。

当用户尝试提交无效的表单时，各个表单控件会收到一个 invalid 事件。如果您愿意，您可以使用它来提供超出浏览器提供的反馈:

$("#sampleform")
    .on("submit", function() {
    alert("Got the 'submit' event; form is being submitted");
  })
  .find("input, select")
  .on("invalid", function() {
    // Will fire for *EACH* invalid control
    alert("Validation failed");;
  });

Fiddle (堆栈片段不允许提交表单，即使它被取消也是如此。)

如果您需要以编程方式提交表单(通过调用 submit)，您可以先使用 checkValidity 来查看表单是否有效:

// When submitting programmatically
var form = $("#sampleForm");
if (form[0].checkValidity()) {
    form.submit();
}

旁注:当您使用 jQuery 提交表单(如上)时，将调用 submit 事件处理程序。但是，如果您使用 DOM 提交表单 ($("#sampleForm)[0].submit())，它们将不会。