Question

我有两种形式：登录，b：忘记密码忘记密码是模态的，登录表格是正常的

我可以验证正常的登录表单
如果我把忘记密码表格像普通表格一样（不用模态），它仍然可以验证
当我制作表单模式时，它只是提交而不进行验证。

如何对Flatui模态对话框使用jquery验证？

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

我的自定义js文件是

   // 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()方法是在表单上初始化插件的方式。通常，在{DOM} ready中调用.validate()，这与构建静态表单的HTML并且已经在DOM中的情况相同。

在你的情况下，我认为由于你的表单在一个模态中，它在DOM中还不存在。解决方案是遵循这个逻辑顺序......

触发Modal的打开并为表单
调用.validate()在模态中初始化表单上的插件

Jquery验证在Bootstrap Flatui模式对话框中不起作用

1 个答案: