Проверка формы с помощью кнопки JQuery onclick

Question

Я написал код проверки для моей формы в jQuery. Все кажется правильным, но это не работает. Помоги мне!

HTML FORM:

<form role="form" name="form1" id="form1"> 
    <div class="form-group"> 
     <label for="usr">Contact Name</label> 
     <input type="text" name="usr" class="form-control" id="usr" placeholder="Full Name"> 
    </div> 
    <div class="form-group"> 
     <label for="pwd">Company Name</label> 
     <input type="text" class="form-control" id="pwd" placeholder="Company Name"> 
    </div> 
    <div class="form-group"> 
     <label for="eml">Email</label> 
     <input type="email" class="form-control" id="eml" placeholder="Email"> 
    </div> 
    <div class="form-group"> 
     <label for="phn">Contact Number</label> 
     <input type="number" class="form-control" id="phn" placeholder="98689-98689"> 
    </div> 
    <div class="form-group"> 
     <label for="comment">Remarks</label> 
     <textarea class="form-control" rows="3" id="comment"></textarea> 
    </div> 
    <button id="submtbtn" style="height:30px ; width:60px; padding: 5px 5px;" type="button" class="btn btn-info" onClick="AddNew(); this.form.reset()">Insert</button> 
    <button style="height:30px ; width:60px; padding: 5px 5px;" type="button" class="btn btn-info" onClick="this.form.reset()">Clear</button> 
    <button id="cnclbtn" style="height:30px ; width:60px; padding: 5px 5px; background-color: #f1f1f1; " type="button" class="btn btn-default">Cancel</button> 
</form> 

Вот скрипт проверки:

$(document).ready(function() { 
    $("#form1").validate({ 
     rules: { 
      usr: "required", 
      pwd: "required", 
      eml: { 
       required: true, 
       email: true 
      }, 
      phn: { 
       required: true, 
       minlength: 10 
      } 
     }, 
     messages: { 
      usr: "Please enter your first name", 
      pwd: "Please enter your last name", 
      eml: { 
       required: "Please provide Email address ", 
       email: "Please enter valid Email address" 
      }, 
      phn: { 
       required: "Please provide a Phone Number", 
       minlength: "Your Phone Number must be 10 digits" 
      } 
     } 
    }); 

    $("#submtbtn").click(function() { 
     $("#form1").valid(); 
    }); 
}); 

Пожалуйста, укажите ошибку. Спасибо.

JSFiddle https://jsfiddle.net/cherry1993/vwo0r0h6/

Answer 1

В your jsFiddle, после удаления <script> и </script> тегов панели JavaScript, и в том числе Jquery и плагин JQuery Validate, он начал работать ... но только для usr поля.

https://jsfiddle.net/vwo0r0h6/2/

Он не работает ни на одном из других полей, потому что вы забыли включить атрибут на тех входных элементов name. Этот плагин использует только атрибут name, а не id, чтобы отслеживать входные данные формы.

<input type="text" class="form-control" name="pwd" placeholder="Company Name"> 

Работа DEMO: https://jsfiddle.net/vwo0r0h6/3/

---

Bonus:

Вам не нужно беспокоиться кастрированный баран значения в пользовательском сообщении соответствует параметр правила. В Просто используйте параметр placeplace, {0}, в пределах настраиваемого сообщения, и его значение будет введено динамически. См. Рабочую демонстрацию выше.

minlength: "Your Phone Number must be {0} digits"