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模块可以正常运行，同时还可以显示我的模态和执行我的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");
   }
  }     
 });
});

jQuery表单验证程序的toggleDisabled模块不适用于非“提交”类型的按钮

1 个答案: