在提交數據之前驗證表單

Question

我正在嘗試在發布數據之前驗證表單。 基本上，表單要求輸入代碼。 用戶單擊“提交”按鈕后，下面的javascript檢查代碼是否僅包含數字並且長度為6位數字。 如果代碼有效，那么將進行ajax調用，調用頁面verifybkcd.php，該頁面將運行查詢並檢查輸入代碼是否已與帳戶關聯。 無論我輸入什么代碼，都總是以某種方式提交表單。似乎從未進行過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進行了如下更改。 如果將提交按鈕命名為“ submit”，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”）。submit（function（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中關閉$（document）.ready。