validate a form before submit the data

Question

I'm trying to validate a form before posting the data. Basically the form asks for a code. After the user clicks the submit button, the javascript below checks if the code only contains numbers and has a length of 6 digit. If the code is valid, then an ajax call is made calling the page verifybkcd.php, which runs a query and checks if the input code has associated with an account. Somehow the form is always submitted no matter what code I put.It seemed the ajax call has never been made because none of the alerts inside the call had been triggered. (I'm sure the path of the file verifybkcd.php is correct). Any ideas?

     $(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();
       }


    });

The following is taken from the php file which has the form

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

BTW, I'm sure there's nothing wrong with verifybkcd.php file. I've tested it with different codes. It will only return a string when there're no accounts associated with the input code.

---

Problem solved. I replaced the name of the submit button with something else. Then it worked like magic. Also I've made a little change on the javascript as follows. It seems jquery won't submit the form if you name the submit button "submit". BTW I aslo changed the type of the submit button to "button" instead of "submit"

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

First place if you dont want to submit the form then you should return false in the submit button click handler. Check if this below condition satisfied or not.

$(document).ready(function(){

//This is to prevent the form to be submitted $("#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

in your example, you are missing:

})

at the end to close your $(document).ready in the javascript.