如何保持驗證但阻止表單提交？ 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