проверка Jquery не работает в диалоговом модальное поле Bootstrap Flatui

Question

У меня есть две формы: с входа в систему, б: забыл пароль Войти Форма нормально, а забыл пароль модально

1. можно проверить нормальную форму входа
2. Если я положу забытую форму пароля, как обычную форму (не делая ее модальной), она все равно проверяет
3. Когда я делаю форму модальной, она просто отправляется, не отправляясь на проверку.

Как использовать проверку jquery для диалоговых окон Flatui Modal?

Login.jade

.form-signin 
    form(name='loginForm', id='loginForm', action='/users/session', method='post') 
    #loginError 
    p.error.label.label-danger= message 
    h4.form-signin-heading Please sign in 
    input.form-control(type='email', name='email', placeholder='Email address', autofocus) 
    input.form-control(type='password', name='password', placeholder='Password') 
    button.btn.btn-lg.btn-primary.btn-block(type='submit') Log in 

    a#forgotpassword(data-toggle='modal', data-target='#forgotPasswordModal') Forgot Password? 

    // Modal 
    #forgotPasswordModal.modal.fade.in(tabindex='-1', role='dialog', aria-labelledby='modalForgotPassword', aria-hidden='true') 
    .modal-dialog 
     .modal-content 
     .modal-header 
      button.close(name='forgotPasswordForm', id='forgotPasswordForm', type='button', data-dismiss='modal', aria-hidden='true') × 
      | You will shortly recieve a mail with instructions for resetting your password. 
     .modal-body 

      form.form-signin(name='forgotPasswordForm', id='forgotPasswordForm', action='/forgotpassword',method='post') 
      p 
       label(for='password') Email: 
       input.form-control(type='email', style="width:250px" name='email', id='email', placeholder='Email address', autofocus) 
       #forgotPasswordError 

      p 
       button.btn.btn-lg.btn-primary(type='submit', id='forgotPasswordSubmit', data-dismiss='modal') Submit 

И мой пользовательский файл расслоение плотной

// Login Form validation 
$("#loginForm").validate({ 

    // Specify the validation rules 
    rules: { 
     email: { 
      required: true, 
      email: true 
     }, 
     password: { 
      required: true 
     }, 
    }, 

    // Specify the validation error messages 
    messages: { 
     email: "Please enter a valid email address", 
     password: { 
      required: "Please provide a password", 
     } 
    }, 

    errorPlacement: function(error, element) { 
     error.addClass('label label-danger block'); 
     error.appendTo('#loginError'); 
    }, 

    // Look for highlight and unhighlight options to include bootstrap popovers 

    submitHandler: function(form) { 
     form.submit(); 
    } 
}); 
// forgot password form validation 
$("#forgotPasswordForm").validate({ 
    // Specify the validation rules 
    rules: { 
     email: { 
      required: true, 
      email: true 
     } 
    }, 

    // Specify the validation error messages 
    messages: { 
     email: "Please enter a valid email address." 
    }, 

    errorPlacement: function(error, element) { 
     error.addClass('label label-danger block'); 
     error.appendTo('#forgotPasswordError'); 
    }, 

    // Look for highlight and unhighlight options to include bootstrap popovers 

    submitHandler: function(form) { 
     form.submit(); 
    } 
}); 

Answer 1

Вы не показали какой-либо оказанной кода, который переключает ваш покадрово.

Однако следующее решение поможет вам прийти к решению.

Метод .validate() - это способ, которым плагин инициализирован на форме. Обычно .validate() вызывается в DOM ready, что является той же точкой, когда HTML статической формы был построен и уже находится в DOM.

В вашем случае я предполагаю, что, поскольку ваша форма находится в пределах модальности, она еще не существует в DOM. Решение состоит в том, чтобы следовать этому логическому порядку ....

1. Trigger открытие Modal и создание HTML для формы

2. Вызов .validate() для инициализации плагина на форме в модальном