个人中心
gpt4 book ai didi

javascript - JQuery 验证工作正常，但 SubmitHandler 不工作

转载 作者：行者123 更新时间：2023-12-01 05:11:38 24 4
gpt4 key购买 nike

我有一个表单，正在尝试使用 JQuery Validate 进行验证，效果很好。单击提交按钮时，submitHandler 应 1. 禁用该按钮(以防止多次提交)并 2. 更改按钮文本。

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

我在这里查看了许多线程，说按钮必须是 type="submit"，位于 <form> 内标签等，无法弄清楚这一点。该按钮仍然可以被多次单击。

有什么帮助吗？

<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>

最佳答案

您可以在客户端进行验证并在按钮的点击事件上禁用按钮。

<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>

关于javascript - JQuery 验证工作正常，但 SubmitHandler 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61486406/

24 4 0
文章推荐： python - Windows下如何改变Tkinter菜单的颜色？
文章推荐： javascript - 光滑 slider : building a comparison slider
文章推荐： jquery - 动态设置iframe的src以延迟加载
文章推荐： java - Spring Security简单应用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com