Jquery-Validierung funktioniert ordnungsgemäß, aber Formular nicht gesendet

Question

meine Formularüberprüfung funktioniert ordnungsgemäß, aber beim Übermitteln der Werte nicht an die Datei process.php senden. Es ist keine Aktion passiert, während Sie auf Senden klicken. Bitte hilf mir. Ich bin neu in 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

Stellen Sie sicher, dass im Formular kein name = "submit" oder id = "submit" vorhanden ist. Entfernen Sie einfach den Namen und die ID der Übermittlungsschaltfläche oder ändern Sie alles andere. Es funktioniert ... Getestet ...

<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

mit einem id="submit" oder name = "submit" keine gültige Form ist. Ich habe sie einfach ausgetauscht und es überprüft.

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