jquery验证正常工作，但表单没有提交

Question

我的表单验证工作正常，但提交的值不发送到process.php文件。点击提交按钮时没有发生任何操作。请帮帮我。我是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

确保表单中没有名称=“submit”或id =“submit”。只需删除提交按钮的名称和ID或更改为其他任何内容。它会工作... ...测试

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

Answer 2

具有id="submit"或name = "submit"不是有效的形式。我只是将它们取代并检查出来。

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