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

只需编写提交处理程序并执行代码即可。

$("#sampleForm").submit(function(){
 // Your code.
})

仅当您通过HTML5自定义验证程序完成验证时才提交处理程序触发器。

以下是演示：http://jsfiddle.net/sureshatta/9ky8Z/118/

Answer 2

在评论中你说过：

但是如果我使用$("#sampleForm").submit()提交表单，表单会被提交，但如果我在submit（）（$("#sampleForm").submit(function(){ //Set of JavaScript code to execute if validation is success. });）内写函数，那么没有任何反应！

触发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（Stack Snippets即使取消也不允许提交表单。）

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

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

附注：当您使用jQuery提交表单（上图）时，将调用submit个事件处理程序。但是如果你使用DOM提交表单（$("#sampleForm)[0].submit()），他们就不会。

Answer 3

Html5表单有checkValidity方法。因为它是一个表单，按钮类型是提交，如果它无效，它将默认弹出一个错误。如果有效，checkValidity方法返回布尔值true。您可以查看此方法以进一步完成工作

$("#sampleForm").submit(function(e) {
  
  var result = document.getElementById('firstname').checkValidity()
  console.log(result) // will log true

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sampleForm" method="post" action="">
  <input type="text" id="firstname" required />
  <input type="text" id="secondname" required />
  <input type="submit" value="Submit" />
</form>

Answer 4

谢谢大家的答案！我尝试了你的每一个解决方案，帮助我找到了解决方案。以下对我有用：

if($("#sampleForm").valid()){
$("#sampleForm").submit();
//Set of JavaScript code to execute.
}

仅当HTML表单验证成功时，如何执行一组JavaScript代码

4 个答案: