Jquery验证工作正常，但表单未提交

Question

my form validation is working properly but on submit the values not send to the process.php file. There is not any action happened while click on submit button. Please help me. I am new to jquery.

        <script>
            $( "#myform" ).validate({
                debug: true,
                      errorClass:'error help-inline',
                      validClass:'success',
                      errorElement:'span',
                      highlight: function (element, errorClass, validClass) { 
                        $(element).parents("div.control-group").addClass(errorClass).removeClass(validClass); 

                      }, 
                      unhighlight: function (element, errorClass, validClass) { 
                              $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
                      },
                rules: {
                    name: "required",
                    city: "required",
                    age: "required",
                    email: {
                          required: true,
                            email: true
                    },

                    phone: "required",

                    },
                messages: {
                    name: "name required",
                    city: "city required",
                    age: "age required",
                    email: {
                      required: "email required",
                      email: "wrong format"
                    },

                    phone: "10 digit mobile"


                },
                submitHandler: function(form) {
                form.submit();
                }
            });
        </script>
    <!-- html code for the form is -->
                <form class="common" id="myform" method="post" action="process.php">
                    <div class="block2">
                        <div class="textclass">
                            <input type="text" class="required " name="name" id="name" placeholder="Name*" required />
                        </div>
                    </div>
                    <div class="block3">
                        <div class="textclass">
                            <input type="email" class="required email " name="email" id="email" placeholder="E-Mail*" required/>
                        </div>
                    </div>
                    <div class="block4">
                        <div class="textclass">
                            <input type="text" class="required city " name="city" id="city" placeholder="City*" required/>
                        </div>
                    </div>
                    <div class="block6">
                        <div class="textclass">
                            <input type="text" class="" name="age" id="age" placeholder="Enter Age*" pattern="[0-9]{2}" required/>
                        </div>
                    </div>
                    <div class="block8">
                        <div class="textclass">
                            <input type="text" class="required number phone" name="phone" id="phone" pattern="[0-9]{10}"  placeholder="Phone No.*" required/>
                        </div>
                    </div>
                    <div class="submitclass">
                        <input type="submit" id="submit" value="submit" name="submit">
                    </div>
                </form>

Answer 1

Make sure that there is no name="submit" or id="submit" in the form. Just remove the name and id of the submit button or change to anything else. It will work... Tested...

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script>
    $(document).ready(function(){
        $( "#myform" ).validate({
                debug: true,
                      errorClass:'error help-inline',
                      validClass:'success',
                      errorElement:'span',
                      highlight: function (element, errorClass, validClass) { 
                        $(element).parents("div.control-group").addClass(errorClass).removeClass(validClass); 

                      }, 
                      unhighlight: function (element, errorClass, validClass) { 
                              $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
                      },
                rules: {
                    name: "required",
                    city: "required",
                    age: "required",
                    email: {
                          required: true,
                            email: true
                    },

                    phone: "required",

                    },
                messages: {
                    name: "name required",
                    city: "city required",
                    age: "age required",
                    email: {
                      required: "email required",
                      email: "wrong format"
                    },

                    phone: "10 digit mobile"
                },
                submitHandler: function(form) {
                    alert('submitted');
                    console.log(form)
                form.submit();
                }
            });
    })

        </script>
    <!-- html code for the form is -->
                <form class="common" id="myform" method="post" action="process.php">
                    <div class="block2">
                        <div class="textclass">
                            <input type="text" class="required " name="name" id="name" placeholder="Name*" />
                        </div>
                    </div>
                    <div class="block3">
                        <div class="textclass">
                            <input type="email" class="required email " name="email" id="email" placeholder="E-Mail*" required/>
                        </div>
                    </div>
                    <div class="block4">
                        <div class="textclass">
                            <input type="text" class="required city " name="city" id="city" placeholder="City*" required/>
                        </div>
                    </div>
                    <div class="block6">
                        <div class="textclass">
                            <input type="text" class="" name="age" id="age" placeholder="Enter Age*" pattern="[0-9]{2}" required/>
                        </div>
                    </div>
                    <div class="block8">
                        <div class="textclass">
                            <input type="text" class="required number phone" name="phone" id="phone" pattern="[0-9]{10}"  placeholder="Phone No.*" required/>
                        </div>
                    </div>
                    <div class="submitclass">
                        <input type="submit"  value="submit" >
                    </div>
                </form>