0

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

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

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

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

索引.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";
  }
}
4

1 回答 1

0

嗯，我找到了答案。我向 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");
   }
  }     
 });
});
于 2019-11-23T14:22:09.290 回答