JQuery 表单验证器的 toggleDisabled 模块对非类型按钮不起作用 'submit'

Question

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

中

问题出在（我怀疑）表单提交按钮上。为了让我的 toggleDisabled 模块正常工作，按钮必须是 'submit.' 类型但是由于提交按钮的性质，我的 ajax 的成功功能被有效地绕过了，这样模态将永远不会被显示。

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

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

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

嗯，我找到了答案。我向点击函数添加了一个参数，然后调用了 preventDefault 方法，这将有效地 'turn off' 提交按钮的提交操作。这允许我在验证器中的 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");
   }
  }     
 });
});

JQuery 表单验证器的 toggleDisabled 模块对非类型按钮不起作用 'submit'

JQuery Form Validator's toggleDisabled module does not work on buttons that are not type 'submit'

php

ajax

jquery

jquery-form-validator