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 for your event，这意味着您的功能将在每次点击时运行。请考虑使用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之前输入条件。

if（valid）调用已经调用的ajax 如果没有返回假

如何保持验证但阻止表单提交？ JQuery的

3 个答案: