Jquery validation working properly but form not get submitted

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

Having an id="submit" or name = "submit" is not a valid form. I just replaced them and check it out.

$( "#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('your form is WORKING NOW');
                  console.log(form)
                form.submit();
                }
            });

  <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>
 <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 id="submit-btn" name="submit-btn" type="submit" value="submit">
                    </div>
                </form>

Answer 2

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>