如何保持验证，但防止表单提交？ JQuery

Question

我的单页应用程序中有几个表单。所有表单都使用相同的功能来提交数据。为了使用HTML5验证，我必须将输入类型从button更改为submit。现在，如果我点击Submit按钮，我可以看到验证消息，但我的表单仍然提交。我如何防止提交并保持我的验证？下面是我的例子形式：

<form name="myForm" id="myForm" method="POST" action="#"> 
    <fieldset> 
     <legend>User Info</legend> 
     <div class="formItem"> 
      <label for="last_name">Last Name:</label> 
      <input type="text" name="frmst_lname" id="frmst_lname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/> 
     </div> 
     <div class="formItem"> 
      <label for="first_name">First Name:</label> 
      <input type="text" name="frmst_fname" id="frmst_fname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/> 
     </div> 
     <div class="formItem"> 
      <label for="dob">DOB:</label> 
      <input type="text" name="frmst_dob" id="frmst_dob" value="" size="10" maxlength="10" placeholder="MM/DD/YYYY" class="datepick" required/> 
     </div> 
     <div class="formItem"> 
      <p align="center"><input type="submit" name="frmSubmit" id="frmstSubmit" value="Submit"></p> 
     </div> 
    </fieldset> 
</form> 

这里是我的例子功能的提交按钮：

$('input[name="frmSubmit"]').on('click', function(){ 
    var formData = $('#'+frmID).serialize(); 
    $.ajax({ 
     type: 'POST', 
     url: 'App.cfc?method=updateRecord', 
     data: formData, 
     dataType: 'json' 
    }).done(function(obj){ 
     //handle call back 
    }).fail(function(jqXHR, textStatus, errorThrown){ 
     alert(errorThrown); 
    }); 
}); 

所有形式对提交按钮相同的名称。我的JQuery选择器使用该名称来提交表单。如果有人知道我如何保持我已经拥有并阻止提交的相同逻辑/功能，请告诉我。

Answer 1

您正在使用点击事件，这意味着您的功能将在每次点击中运行。请考虑使用submit事件。这应该阻止该函数在提交表单之前运行，如果存在HTML5验证错误，则不能执行此操作。
[编辑]而为了澄清，你也会改变你的事件监听器是看表单元素，而不是按钮。所以：

$('#myForm').on('submit', function... etc. 

Answer 2

你可以使用表单标签的onSubmit属性设置

function submitForm() 
 
{ 
 

 
    var formData = $('#'+frmID).serialize(); 
 
    $.ajax({ 
 
     type: 'POST', 
 
     url: 'App.cfc?method=updateRecord', 
 
     data: formData, 
 
     dataType: 'json' 
 
    }).done(function(obj){ 
 
     //handle call back 
 
    }).fail(function(jqXHR, textStatus, errorThrown){ 
 
     alert(errorThrown); 
 
    }); 
 
}

<form name="myForm" id="myForm" onSubmit="submitForm();" method="POST" action="#"> 
 
    <fieldset> 
 
     <legend>User Info</legend> 
 
     <div class="formItem"> 
 
      <label for="last_name">Last Name:</label> 
 
      <input type="text" name="frmst_lname" id="frmst_lname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/> 
 
     </div> 
 
     <div class="formItem"> 
 
      <label for="first_name">First Name:</label> 
 
      <input type="text" name="frmst_fname" id="frmst_fname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/> 
 
     </div> 
 
     <div class="formItem"> 
 
      <label for="dob">DOB:</label> 
 
      <input type="text" name="frmst_dob" id="frmst_dob" value="" size="10" maxlength="10" placeholder="MM/DD/YYYY" class="datepick" required/> 
 
     </div> 
 
     <div class="formItem"> 
 
      <p align="center"><input type="submit" name="frmSubmit" id="frmstSubmit" value="Submit"></p> 
 
     </div> 
 
    </fieldset> 
 
</form>

Answer 3

你可以像这样

如果更改输入类型按钮时，它会更好因为你没有提交表单，所以你正在发送一个Ajax请求。

首先制作不同的js脚本进行验证，并在调用ajax之前放置条件。

如果（有效）调用ü已经 调用AJAX如果没有返回false