在表单上进行 jquery 验证后，如何防止引导模式关闭？答案

【问题标题】：how do I prevent bootstrap modal close after jquery validation on a form?在表单上进行 jquery 验证后，如何防止引导模式关闭？
【发布时间】：2014-11-12 01:17:37
【问题描述】：

平台：ASP.NET 4.5、MVC 5、最新的 jQuery、bootstrap 和 jQuery validate

我的问题是，一旦我验证了表单，我想进行 ajax 调用而不是关闭模式。

这是我的表格：

<form id="loginform" action="">
    <div id="login-login">
          <span>
            <input type="email" name="login-email" id="login-email" placeholder="my@email.com" />
            <input class="btn btn-success submit" type="submit" id="login-submit" value="Submit" />
          </span>
    </div>
 </form>

我的 jQuery 在我的 document.ready 中

$("#login-form").popover(); // this is the overall modal id name

$("#loginform").validate({
    rules: {
        email: {
            required: true,
            email: true
        },
        submitHandler: function (form) {
            console.log("submit on ok");
            return false;
        }
    },
});

会发生什么：

当我输入无效的电子邮件时，我会看到默认的 jQuery 验证触发并向我显示一条友好的消息。但是，当输入正确时，我看不到 console.log 消息（我也使用了警报），模式只是关闭并且我不希望它关闭。不知道我还能做什么？

任何帮助表示赞赏。

【问题讨论】：

标签： jquery asp.net-mvc twitter-bootstrap jquery-validate

【解决方案1】：

<input type="email" name="login-email" id="login-email" placeholder="my@email.com" />

jQuery Validation 插件在您的情况下无法正常工作，因为...

您的元素包含name="login-email"，而您的目标是name="email"。这必须与name 属性匹配。

rules: {
    "login-email": {  // <- this must match the 'name' of the field
        required: true,
        email: true
    },
    ....

您错误地将submitHandler 嵌套在rules 选项中。这个回调是rules 的兄弟，而不是孩子。

rules: {
    ....
},
submitHandler: function (form) {
    console.log("submit on ok");  // this now fires on a valid form submit
    // ajax goes here
    return false;
}

工作演示：http://jsfiddle.net/2axtuqed/

【讨论】：