如何保持验证但阻止表单提交？ 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

您将click用于事件，这意味着您的功能将在每次点击时运行。 考虑改为使用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

你能这样吗

如果将输入类型更改为button会更好，因为您没有提交表单，而是要发送ajax请求。

首先创建不同的js脚本进行验证，然后在调用ajax之前放入条件。

if（valid）调用ajax u已调用，如果没有返回false