JQuery 表单验证器的 toggleDisabled 模块不适用于非“提交”类型的按钮答案

【问题标题】：JQuery Form Validator's toggleDisabled module does not work on buttons that are not type 'submit'JQuery 表单验证器的 toggleDisabled 模块不适用于非“提交”类型的按钮
【发布时间】：2019-11-17 17:38:16
【问题描述】：

我有一个使用 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";
  }
}

【问题讨论】：

您使用了错误的验证插件标签。已编辑。
??我在发表初步评论时已经对其进行了编辑。
对不起。我编辑的标签是正确的。我使用的插件是 Victor Jonsson 的。 :)

标签： php jquery ajax jquery-form-validator

【解决方案1】：

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

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

【讨论】：