Валидация не работает при щелчке Отправить: jquery

Question

Я знаком с JQuery, и я пытаюсь проверить простую форму для начала.

Проблема в том, что валидация не работает при нажатии кнопки submit. Вместо этого я получаю сообщение об ошибке:

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

Вот jsfiddle: https://jsfiddle.net/aimanpanday87/hsdscmcj/

Answer 1

Показать код ниже Edit в почтовом коде только добавить JS ссылки

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

Пожалуйста, сделайте ваш код, как показано ниже, или проверьте ниже скрипку ссылке:

Рабочий код Ссылка: 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> 

Это работает, пожалуйста, проверьте.

Благодаря