Экспресс: jQuery Проверка не работает

Question

Я создаю веб-приложение с помощью Express и Jade. Я хочу проверить форму с помощью проверки jQuery. Он не дает никаких ошибок, но когда я вставляю неправильные значения в форму, он также не жалуется. Он просто отправляет данные на сервер Express.

Это моя форма:

form.form-horizontal(#signupForm, method='post', action='') 
      .form-group 
       label.col-sm-2.control-label(for='firstName') 
        | First Name: 
       .col-sm-10 
        input.form-control(#firstName, 
             type='text', 
             placeholder='John', 
             name='firstName') 

      .form-group 
       label.col-sm-2.control-label(for='lastName') 
        | Last Name: 
       .col-sm-10 
        input.form-control(#lastName, 
             type='text', 
             placeholder='Doe', 
             name='lastName') 

      .form-group 
       label.col-sm-2.control-label(for='password') 
        | Password: 
       .col-sm-10 
        input.form-control(#password, 
             type='password', 
             placeholder='Password (minimum 8 characters)', 
             name='password') 

      .form-group 
       label.col-sm-2.control-label(for='confirmPassword') 
        | Confirm Password: 
       .col-sm-10 
        input.form-control(#confirmPassword, 
             type='password') 

      .form-group 
       .col-sm-2.control-label 
        button.btn.btn-default(type='submit') 
         | Sign Up! 

Это тонированное HTML:

<form #signupform="" method="post" action="" class="form-horizontal"> 
<div class="form-group"> 
    <label for="firstName" class="col-sm-2 control-label">First Name:</label> 
    <div class="col-sm-10"> 
    <input #firstname="" type="text" placeholder="John" name="firstName" class="form-control"> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="lastName" class="col-sm-2 control-label">Last Name:</label> 
    <div class="col-sm-10"> 
    <input #lastname="" type="text" placeholder="Doe" name="lastName" class="form-control"> 
    </div> 
</div> 
... 
<div class="form-group"> 
    <div class="col-sm-2 control-label"> 
    <button type="submit" class="btn btn-default">Sign Up!</button> 
    </div> 
</div> 
</form> 

Это мой JavaScript файл:

$(document).ready(function() { 

$('#signupForm').validate({ 
    rules: { 
     firstName: { 
      required: true 
     }, 
     lastName: { 
      required: true 
     }, 
     password: { 
      required: true, 
      minlength: 8 
     }, 
     confirmPassword: { 
      required: true, 
      equalTo: '#password' 
     } 
    }, 
    messages: { 
     firstName: { 
      required: 'This field is required!' 
     }, 
     lastName: { 
      required: 'This field is required!' 
     }, 
     password: { 
      required: 'This field is required!', 
      minlength: 'This password is too short!' 
     }, 
     confirmPassword: { 
      required: 'This field is required!', 
      equalTo: 'This password is not the same!' 
     } 
    } 
}); 

}); 

Answer 1

На первый взгляд, ваши идентификаторы должны выглядят так:

"lastName": { required: 'This field is required'} 

Редактировать Увидев ваш html, ваш вход для визуализации имел проблемы с идентификаторами.

<input #lastname="" 

должен быть

<input id="lastname"> 

То же самое касается вашей формы ид.

Редактировать Как указано ниже, атрибут name используется для таргетинга на валидацию.