Javascript JQuery验证正在工作，但submitHandler不工作_Javascript_Php_Html_Jquery

Javascript JQuery验证正在工作，但submitHandler不工作

javascript php html jquery

Javascript JQuery验证正在工作，但submitHandler不工作,javascript,php,html,jquery,Javascript,Php,Html,Jquery,我有一个表单，我正在尝试使用jqueryvalidate进行验证，它运行良好。单击submit按钮时，submitHandler应为1。禁用按钮（以防止多次提交）和2。更改按钮文本按原样，代码用于验证，但不调用submitHandler 我在这里查看了很多帖子，说按钮必须是type=“submit”，在标签内，等等，但我无法理解这一点。该按钮仍然可以单击多次有什么帮助吗 <script type="text/javascript" src="https://ajax.googleapi

我有一个表单，我正在尝试使用jqueryvalidate进行验证，它运行良好。单击submit按钮时，submitHandler应为1。禁用按钮（以防止多次提交）和2。更改按钮文本

按原样，代码用于验证，但不调用submitHandler

我在这里查看了很多帖子，说按钮必须是type=“submit”，在

标签内，等等，但我无法理解这一点。该按钮仍然可以单击多次

有什么帮助吗

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>


<script type="text/javascript">


$(document).ready(function() {
  $("#freebottleform").validate({
     rules: {
       address : {
           required: true
       },
       city : {
           required: true
       },
       state : {
           required: true
       },
       zipcode : {
           required: true
       },
       phoneNumber : {
           required: true,
           phoneUS: true
       },
     },

     //Specify the validation error messages here
     messages: {
       email: {
         required: "Please enter email address",
        email: "Please enter a valid email address"
       },
       phoneNumber: {
         required : "Please enter your mobile number",
         digits: "Please enter digits only"
       }
     },
        submitHandler: function (form) {
            $("#finalSubmit").attr("disabled", true);
            $("#finalSubmit").html("Submitting... please wait.");
            form.submit();
        }

  });
});


</script>


<!DOCTYPE html>
<html lang="en">
<div class="freebottleform">

    <form method="post"  id="freebottleform" name="freebottleform" action="p6.php">
        Please enter your shipping details.<br>
        <br>
        Address:<br>
        <input type="text" name="address" class="required" placeholder="Please enter your address."/><br>
        <input type="text" name="address2" placeholder="Suite/Apt/Etc."/><br>
        <br>
        City:<br>
        <input type="text" name="city" class="required" placeholder="Please enter your city."/><br>
        <br>
        State:<br>
        <input type="text" name="state" class="required" placeholder="Please enter your state."/><br>
        <br>
        Zip Code:<br>
        <input type="text" name="zipcode" class="required" placeholder="Please enter your zipcode."/><br>
        <br>
        Phone Number:<br>
        <input type="text" name="phoneNumber" class="required" placeholder="Please enter your phone number."/><br>
        <br>
        <label><input type="checkbox" name="subscribe" id="subscribe" value="true" checked/> Subscribe to our newsletter to get FREE weekly tips sent right to your inbox!</label><br>
        <br>

    <button id="finalSubmit" type="submit" name="submit" value="final" >CONTINUE</button>

    </form>

</div>
</html>


$（文档）.ready（函数（）{
$（“#免费瓶装”）.validate({
规则：{
地址:{
必填项：true
},
城市：{
必填项：true
},
声明：{
必填项：true
},
zipcode：{
必填项：true
},
电话号码：{
要求：正确，
真的吗
},
},
//在此处指定验证错误消息
信息：{
电邮：{
必填：“请输入电子邮件地址”，
电子邮件：“请输入有效的电子邮件地址”
},
电话号码：{
必填：“请输入您的手机号码”，
数字：“请仅输入数字”
}
},
submitHandler:函数（表单）{
$（“finalSubmit”）.attr（“disabled”，true）；
$（“#最终提交”）.html（“提交…请稍候”）；
表单提交（）；
}
});
});
请输入您的发货详细信息。



地址：







城市：





状态：





邮政编码：





电话号码：





订阅我们的时事通讯，获得每周免费发送到您收件箱的提示



继续

您可以在客户端单击按钮事件上执行验证并禁用按钮

<script type="text/javascript">

$("#finalSubmit").click(function()
  {
   //do your validation and if correct then disable the button

    $("#finalSubmit").attr("disabled", true);

    //other work if any
   }
  );
</script>


$（“#最终提交”）。单击（函数（）
{
//进行验证，如果正确，则禁用按钮
$（“finalSubmit”）.attr（“disabled”，true）；
//其他工作（如有）
}
);

首先，不要使用jQuery进行验证，而是像使用PHP等在服务器端进行验证，并在显示页面上反映输出

这里举一个例子：

index.php

<!DOCTYPE html>
<html>
  <head>
    <title>Site Title</title>
  </head>
  <body>
    <h1>Form</h1>
    <div class="message"></div>
    <form method="post" action="" name="registrationForm">
      First Name <input type="text" name="fname"><br>
      Last Name <input type="text" name="lname"><br>
      Phone <input type="text" name="phone"><br>
      <input type="submit" value="Register" class="regbtn">
    </form>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
      $(document).ready(function(){
        $(".regbtn").click(function(){
          var form = document.registrationForm;
          var dataString = $(form).serialize();
          $.ajax({
            type: 'POST',
            url: "your-processing-page.php",
            data: dataString,
            cache: true,
            beforeSend: function(){
              $('.message').hide();
              $(".regbtn").prop('disabled', true).val('Please wait...');
            },
            success: function(data){
              $('.message').html(data).fadeIn();
              $(".regbtn").prop('disabled', false).val('Register');
            }
          });
          return false;
        });
      });
    </script>
  </body>
</html>


网站名称
形式
名字

姓氏

电话

$（文档）.ready（函数（）{
$（“.regbtn”）。单击（函数（）{
var form=document.registrationForm；
var dataString=$（form）.serialize（）；
$.ajax({
键入：“POST”，
url:“您的处理页面.php”，
数据：dataString，
是的，
beforeSend:function（）{
$（'.message'）.hide（）；
$（“.regbtn”）.prop（'disabled'，true）.val（'Please wait…'）；
},
成功：功能（数据）{
$（'.message'）.html（data.fadeIn（）；
$（“.regbtn”）.prop（'disabled'，false）.val（'Register'）；
}
});
返回false；
});
});

your-processing-page.php

<?php
$fname = (!empty($_POST['fname']))?$_POST['fname']:null;
$lname = (!empty($_POST['lname']))?$_POST['lname']:null;
$phone = (!empty($_POST['phone']))?$_POST['phone']:null;

if($_POST){
  // Perform Checks Here
  if(trim($fname) == ''){
    echo "Please enter first name.";
  }else if(trim($lname) == ''){
    echo "Please enter last name.";
  }else if((strlen($phone)) == 0){
    echo "Please enter a phone number";
  }else if((strlen($phone)) < 10){
    echo "Phone number must not contain less than 10 digits.";
  }else if((strlen($phone)) > 10){
    echo "Phone number must not contain more than 10 digits.";
  }else{
    // If all checks are cleared perform your query
    $stmt = $pdo->prepare("INSERT INTO members(mem_fname, mem_lname, mem_phone)VALUS(:fname, :lname, :phone)");
    $stmt-> bindValue(':fname', $fname);
    $stmt-> bindValue(':lname', $lname);
    $stmt-> bindValue(':phone', $phone);
    $stmt-> execute();

    if($stmt){
      echo "Success! User has been registered.";
    }else{
      echo "Sorry, something went wrong. Please refresh the page and try again!";
    }
  }
}
?>

这是一个完整的答案。在这里：

验证是在服务器端使用PHP完成的（更好的方法，必须遵循）

jQuery禁用submit按钮以防止单击后重复提交

当按下submit按钮时，jQuery更改按钮文本值，并在表单提交成功返回时更改回默认值

注意：以上是一个完全工作的“标准”编码示例。这就是你应该如何编码。但是，根据需要执行其他必要的检查。仅以上面的编码为例来构建您自己的代码。快乐编码：）

将submit按钮名称更改为其他名称，因为它会覆盖表单上的submit（）函数，那么此代码应该适用于您（）。↓↓

$（文档）.ready（函数（）{
$（“#免费瓶装”）.validate({
规则：{
地址:{
必填项：true
},
城市：{
必填项：true
},
声明：{
必填项：true
},
zipcode：{
必填项：true
},
电话号码：{
要求：正确，
//真的，
数字：真
},
},
//在此处指定验证错误消息
信息：{
电邮：{
必填：“请输入电子邮件地址”，
电子邮件：“请输入有效的电子邮件地址”
},
电话号码：{
必填：“请输入您的手机号码”，
数字：“请仅输入数字”
}
},
submitHandler:函数（表单）{
$（“finalSubmit”）.attr（“disabled”，true）；
$（“#最终提交”）.html（“提交…请稍候”）；
setTimeout（函数（）{
表单提交（）；
}, 3000);
}
});
});

请输入您的发货详细信息。


地址:







城市：





声明：





邮政编码：




电话号码：





订阅我们的时事通讯，获得每周免费发送到您收件箱的提示



继续
几个问题：您是否尝试升级到较新版本的JQuery，并查看控制台输出以查看是否存在任何异常？存在：TypeError:$.validator.methods[method]未定义
，似乎是由规则phoneUS
@msg造成的。就是这样！我以前为电话号码设置了一个方法，但意外地将其保留了下来。似乎它捕捉到了那个错误，然后忽略了所有代码。非常感谢你@Dragonsnap捕捉得很好，我不知道我运行的是一个非常旧版本的JQue