Php JQuery表单验证程序'；s toggleDisabled模块不适用于非'；提交'；

我有一个表单，它使用jqueryformvalidator插件（）执行客户端预提交验证。我激活了toggleDisabled模块，以便禁用submit按钮，直到所有必填字段都已填写并正确格式化。然后，我的jquery通过ajax将表单数据发送到处理页面。php代码将数据存储在一个表中。一旦成功，ajax应该打开一个模式。我已验证数据是否存储在我的表中

问题在于（我怀疑）表单提交按钮。为了使我的toggleDisabled模块正常工作，该按钮必须是“提交”类型。但是由于提交按钮的性质，我的ajax的成功功能实际上被绕过，因此该模式将永远不会显示

我通过将submit按钮更改为常规按钮来测试这一点。以我的toggleDisabled模块不能以这种方式工作为代价，显示我的模式

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

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>   

---

我找到了答案。我在click函数中添加了一个参数，然后调用了preventDefault方法，这将有效地“关闭”提交按钮的提交操作。这允许验证器中禁用的toggleDisabled模块正常工作，同时还允许显示我的模式并执行我的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");
   }
  }     
 });
});

---

您使用了错误的验证插件标记。编辑。？？我在发表初步评论时已经编辑过了。对不起。我编辑的标签是正确的。我正在使用的插件是Victor Jonsson的。：）

$('#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");
   }
  }     
 });
});