JQuery 表单验证器的切换禁用模块不适用于类型不是"提交"的按钮

Question

我有一个使用jquery表单验证器插件的表单(http://www.formvalidator.net/)以执行客户端预提交验证。我激活了toggleDisabled模块，这样提交按钮就会被禁用，直到所有必需的字段都被正确填写和格式化。然后，我的jquery通过ajax将表单数据发送到处理页面。storeData.php代码将数据存储在一个表中。一旦成功，ajax就应该打开一个模态。我已经确认数据存储在我的表中。

问题在于(我怀疑(表单提交按钮。为了使toggleDisabled模块正常工作，按钮的类型必须为"提交"但是，由于提交按钮的性质，我的ajax的成功功能被有效地绕过了，因此永远不会显示模态。

我已经通过将提交按钮更改为常规按钮进行了测试。以我的toggleDisabled模块不能以这种方式运行为代价，我的模态被显示出来。

我在这里找到了许多启用/禁用按钮的解决方案，也可以通过将按钮类型更改为按钮来防止表单提交。但是，我想使用验证器模块来禁用/启用按钮，因为它是为监听我的表单字段的数据验证属性而设计的。但除非是提交按钮，否则它不会工作。有没有一个简单的解决方案我忽略了？

index.php

<form method="post" name="talentForm" id="talentForm">
<div class="form-row">
<div class="col-auto redtext">*</div>
<div class="col">
<input type="text" id="first" class="form-control" placeholder="First name" data-validation="required">
</div>
<div class="col-auto">&nbsp;&nbsp;</div>
<div class="col-auto redtext">*</div>
<div class="col">
<input type="text" id="last" class="form-control" placeholder="Last name" data-validation="required">
</div>
</div>
<div class="row rowtm20"></div>
<div class="form-row">
<div class="col-auto redtext">*</div>
<div class="col">
<input type="text" id="email" class="form-control" placeholder="E-mail" data-validation="email">
</div>
<div class="col-auto">&nbsp;&nbsp;</div>
<div class="col-auto">&nbsp;&nbsp;</div>
<div class="col">
<input type="text" id="phone" class="form-control" placeholder="Phone">
</div>
</div>                    
<div class="form-row">
<button type="submit" id="registerButton" class="btn btn-primary mb-2 biggertext">Register</button>
</div>
</form>
<script>
$.validate({
modules : 'security,toggleDisabled',
showErrorDialogs : false
});
$('#registerButton').on('click', function(){
var inputData = $('#last').val()+"|"+$('#fist').val()+"|"+$('#email').val()+"|"+$('#phone').val();
$.ajax({
type: 'post',
url: 'storeEntry.php',
data: {registration:inputData},
success: function(response){
if(response == "1"){
$("#thankyouModal").modal("show");
}
else{
alert("Error");
}
}     
});
});
</script>   

storeEntry.php

if(isset($_POST)){
$data = explode("|",$_POST['registration']);
$addRegistration = "insert into talent (Last,First,email,Phone) values('".$data[0]."','".$data[1]."','".$data[2]."','".$data[3]."')";
$entry = $dbConn->query($addRegistration) or die ("Error performing addRegistration query: ".mysqli_error($dbConn));
if($entry){
echo "1";
} else{
echo "0";
}
}

Answer 1

好吧，我找到了答案。我在click函数中添加了一个参数，然后调用了preventDefault方法，该方法将有效地"关闭"提交按钮的提交操作。这允许我在验证器中的toggleDisabled模块正常工作，同时也允许我的modal出现和ajax执行。Hre是我修改后的点击功能：

$('#registerButton').on('click', function(e){
e.preventDefult();
var inputData = $('#last').val()+"|"+$('#fist').val()+"|"+$('#email').val()+"|"+$('#phone').val();
$.ajax({
type: 'post',
url: 'storeEntry.php',
data: {registration:inputData},
success: function(response){
if(response == "1"){
$("#thankyouModal").modal("show");
}
else{
alert("Error");
}
}     
});
});