Validierung funktioniert nicht bei Klick auf Senden: jquery

Question

Ich bin zu JQuery bekannt und ich versuche, ein einfaches Formular zu validieren, um damit zu beginnen.

Das Problem hier ist die Validierung funktioniert nicht bei Klick auf Senden. Stattdessen erhalte ich Fehlermeldung:

$(document).ready(function() { 
 
    $("#form").validate({ 
 
     rules: { 
 
      "name": { 
 
       required: true, 
 
       minlength: 5 
 
      }, 
 
      "email": { 
 
       required: false, 
 
       email: true 
 
      } 
 
     }, 
 
     messages: { 
 
      "name": { 
 
       required: "Please, enter a name" 
 
      }, 
 
      "email": { 
 
       required: "Please, enter an email", 
 
       email: "Email is invalid" 
 
      } 
 
     }, 
 
     submitHandler: function (form) { // for demo 
 
      alert('valid form submitted'); // for demo 
 
      return false; // for demo 
 
     } 
 
    }); 
 

 
});

<form id="form" method="post" action="#"> 
 
    <label for="name">Name</label> 
 
    <input type="text" name="name" id="name" /> 
 
    <label for="email">Email</label> 
 
    <input type="email" name="email" id="email" /> 
 
    <button type="submit">Submit</button> 
 
</form>

Hier ist die jsfiddle: https://jsfiddle.net/aimanpanday87/hsdscmcj/

Answer 1

zeigen Below-Code bearbeiten in Postleitzahl nur js Links hinzufügen

$(document).ready(function() { 
 
    $("#form").validate({ 
 
     rules: { 
 
      "name": { 
 
       required: true, 
 
       minlength: 5 
 
      }, 
 
      "email": { 
 
       required: false, 
 
       email: true 
 
      } 
 
     }, 
 
     messages: { 
 
      "name": { 
 
       required: "Please, enter a name" 
 
      }, 
 
      "email": { 
 
       required: "Please, enter an email", 
 
       email: "Email is invalid" 
 
      } 
 
     }, 
 
     submitHandler: function (form) { // for demo 
 
      alert('valid form submitted'); // for demo 
 
      return false; // for demo 
 
     } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script> 
 
<form id="form" method="post" action="#"> 
 
    <label for="name">Name</label> 
 
    <input type="text" name="name" id="name" /> 
 
    <label for="email">Email</label> 
 
    <input type="email" name="email" id="email" /> 
 
    <button type="submit">Submit</button> 
 
</form>

Answer 2

Bitte stellen Sie Ihren Code wie unten oder unten Geige Verbindung überprüfen:

Arbeits-Code-Link: https://jsfiddle.net/hsdscmcj/9/

  <form id="form" method="post" action="#"> 
       Name 
       <input type="text" name="name" id="name" /> 
       Email 
       <input type="email" name="email" id="email" /> 
       <button type="submit">Submit</button> 
      </form> 

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script> 
      <script> 

      $(document).ready(function() { 
       $("#form").validate({ 
        rules: { 
         "name": { 
          required: true, 
          minlength: 5 
         }, 
         "email": { 
          required: true, 
          email: true 
         } 
        }, 
        messages: { 
         "name": { 
          required: "Please, enter a name" 
         }, 
         "email": { 
          required: "Please, enter an email", 
          email: "Email is invalid" 
         } 
        }, 
        submitHandler: function (form) { // for demo 
         alert('valid form submitted'); // for demo 

        } 
       }); 

      }); 

      </script> 

Dies funktioniert, bitte überprüfen.

Dank