javascript - 用于 AJAX 登录表单的 bootbox + jQuery.validator 不起作用

Question

我有following fiddle与我的问题。

当我在模态空表单上按“登录”时，验证器应将字段标记为错误。此外，验证通过后应提交表单。

控制台中没有错误并且不起作用。

下面我的代码中的这一行似乎不像 this other fiddle 中那样工作。 :

var form = $("#ajax_login_form");
form.validate();

我错过了什么？谢谢!

使用 jQuery 验证器，我有以下 JS:

/**
 * Login modal form
 */
function loginModal() {
  var content = $("#login_form").html();
  $("#login_form").detach();

  bootbox.dialog({
    title: "TEST",
    message: content,
    size: 'medium',
    className: 'modal-primary',
    buttons: {
      success: {
        label: "Sign in",
        className: "btn btn-sm btn-primary",
        callback: function() {
          loginValidator();
          var form = $("#ajax_login_form");
          form.validate();
          return false; // keeps dialog open
        }
      }
    },
    onEscape: function() {
      logout();
    }
  });
}

/**
 * Validator for login AJAX form
 */
function loginValidator() {
  $("#ajax_login_form").validate({
    rules: {
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 8
      }
    },
    messages: {
      email: "Please enter a valid email address",
      password: {
        required: "Please provide a password",
        minlength: $.validator.format("Your password must be at least {0} characters long")
      }
    },
    submitHandler: function(form) {
      alert("submitted!");
      return false;
    }
  });
}

HTML 是:

<div id="login_form" style="display:none;">

  <form method="post" action="#" accept-charset="UTF-8" class="form" id="ajax_login_form" name="ajax_login_form">

    <div class="form-group">
      <input class="form-control" id="email" placeholder="Your email" name="email" type="email" />
    </div>

    <div class="form-group">
      <input class="form-control" id="password" placeholder="Your password" name="password" type="password" value="" />
    </div>

    <div class="form-group">
      <input type="checkbox" name="remember" />
      <label for="remember">&nbsp;Remember Me
      </label>
    </div>
  </form>
</div>

Answer 1

替换

form.validate();

与

form.valid();

这应该按预期工作(对我有用)。

编辑:替换为

form.submit();

如果您想提交表单(如果该表单有效)。