Question

我正在尝试在发布数据之前验证表单。基本上表单要求代码。用户单击提交按钮后，下面的javascript检查代码是否只包含数字并且长度为6位。如果代码有效，则调用页面verifybkcd.php进行ajax调用，该页面运行查询并检查输入代码是否与帐户相关联。无论如何，总是提交表单，无论我放入什么代码。似乎从未进行过ajax调用，因为调用中的警报都没有被触发。（我确定文件verifybkcd.php的路径是正确的）。有任何想法吗？

     $(document).ready(function(){

    $("#bksubmit").click(function(e){


       var bkcode = $("#bkcode").val();

       var bkcode_format =/^\d{6}$/;
       if(bkcode_format.test(bkcode)){

          $("#err-box").text("");
          $("#recovform").submit(function(e){

            alert("alert on submit");


            $.post("accounts/verifybkcd.php",{bcd:bkcode}, function(data){
                    alert("alert inside post");
                    if(data !=''){
                         alert("alert on code exists");
                        e.preventDefault();
                        $("#err-box").text("No account found with that book code. Please try again.");

                    }
                    else{

                        alert("alert on valid");
                        $("#err-box").text("");


                    }
            });

        });

       }
       else{

         $("#err-box").text("Please enter a valid book code above");
         e.preventDefault();
       }


    });

以下内容来自php文件，其格式为

     <div id="container">
     <?php
    if($_SERVER['QUERY_STRING']==''){
     ?>
    <div class="title"><h1>Forgot your password?</h1></div>
    <div class="description"><p>To reset your password, enter the book code that you used when you registered your account.</p></div>

        <form id="recovform" name="recovform" method="post" action="recovery.php?verifyuser" >
            <div id="bkbox">
                <label for="bkcode">Book Code:</label>
                <input id="bkcode" name="bkcode" type="text" />
                <input id="bksubmit" name="submit" type="submit" value="Submit"/>
            </div>
           <div id="err-box"></div>
        </form>
     <?php
    } 
     else if($_SERVER['QUERY_STRING']=='verifyuser'){

     ?>
       <div class="title"><h1>verify user</h1></div>
       <div class="description"><p>emails below</p></div>
    <?php
     }
     else{
        echo "<META   HTTP-EQUIV=REFRESH   CONTENT='0;URL=../err/404.php'>";
     }
    ?>
</div>

顺便说一句，我确定verifybkcd.php文件没有任何问题。我用不同的代码测试过它。只有在没有与输入代码关联的帐户时，它才会返回一个字符串。

问题解决了。我用其他东西替换了提交按钮的名称。然后它像魔术一样工作。另外我对javascript做了一点改动，如下所示。如果您将提交按钮命名为“提交”，则jquery似乎不会提交表单。顺便说一下，我也将提交按钮的类型更改为“按钮”而不是“提交”

    $(document).ready(function(){

    $("#bksubmit").click(function(e){


       var bkcode = $("#bkcode").val();

       var bkcode_format =/^\d{6}$/;
       if(bkcode_format.test(bkcode)){

          $("#err-box").text("");

            $.post("accounts/verifybkcd.php",{bcd:bkcode}, function(data){
                    if(data !=''){   
                        $("#err-box").text("No account found with that book code. Please try again.");
                    }
                    else{

                        $("#err-box").text("");
                        $("#recovform").trigger("submit");

                    }
            });

       }
       else{

         $("#err-box").text("Please enter a valid book code above");
       }


    });



    });

Answer 1

如果您不想提交表单，那么首先应该在提交按钮单击处理程序中return false。检查以下条件是否满足。

$(document).ready(function(){

//这是为了防止提交表单 $（ “＃recovform”）。提交（函数（E）{ e.preventDefault（）; }）;

$("#bksubmit").click(function(e){

   var bkcode = $("#bkcode").val();

   var bkcode_format =/^\d{6}$/;
   if(bkcode_format.test(bkcode)){

      $("#err-box").text("");
      //$("#recovform").submit(function(e){

        //alert("alert on submit");


        $.post("accounts/verifybkcd.php",{bcd:bkcode}, function(data){
                alert("alert inside post");
                if(data !=''){
                    //alert("alert on code exists");
                    //e.preventDefault();
                    $("#err-box").text("No account found with that book code. Please try again.");

                }
                else{

                    //alert("alert on valid");
                    $("#err-box").text("");

                    $("#recovform").unbind('submit').submit(); 
                }
        });

    //});

   }
   else{

     $("#err-box").text("Please enter a valid book code above");
     return false;
   }
});

Answer 2

在你的例子中，你错过了：

})

最后在javascript中关闭你的$（文件）.ready。

在提交数据之前验证表单

2 个答案: