停止在 Jquery 中提交表单答案

【问题标题】：Stop submiting the form in Jquery停止在 Jquery 中提交表单
【发布时间】：2014-09-25 21:11:48
【问题描述】：

我正在尝试在 bootstrap 和 jquery 中进行一些简单的验证这里是JS

$(document).ready(function() {
    $("form").submit(function() {

        if (($('input[name^=password]').val()) != password) {
            msg = 'Incorrect username or password';
            $(".modal-body").text(msg);
            $('#myModal').modal('show');

        }
    });
});

问题是表格只是继续吗？

她正在工作 http://www.bootply.com/7Tvg4nhuG4

已编辑

我做了这样的事情，但我不确定有两个 IF 是否可以

$(document).ready(function() {
    $("form").submit(function() {

        if ((($('input[name^=password]').val()) != password) || (($('input[name^=username]').val()) != username)) {
            msg = 'Incorrect username or password';
            $(".modal-body").text(msg);
            $('#myModal').modal('show');

            return false;
        } 
            if ((($('input[name^=password]').val()) != "") || (($('input[name^=username]').val()) != "")) {
                return false;
        } 
        else {
            // do something
        }
    });
});

【问题讨论】：

您的演示有错误，在 Chrome 中不适合我。
不要在客户端做密码验证，同样var msg = "..."

标签： jquery twitter-bootstrap validation

【解决方案1】：

您没有告诉表单不要提交，所以它不会提交。 :-)

if (($('input[name^=password]').val()) != password) {
    msg = 'Incorrect username or password';
    $(".modal-body").text(msg);
    $('#myModal').modal('show');

    return false; // this halts form submission
}

【讨论】：

【解决方案2】：

有几种方法可以做到这一点。您的提交方法可以返回 false，或者您可以将事件作为参数传入并调用 preventDefault 以停止默认操作（提交）。

返回假

$(document).ready(function() {
    $("form").submit(function() {
        if (($('input[name^=password]').val()) != password) {
            msg = 'Incorrect username or password';
            $(".modal-body").text(msg);
            $('#myModal').modal('show');

            return false;
        }
    });
});

PreventDefault

$(document).ready(function() {
    $("form").submit(function(ev) {
        if (($('input[name^=password]').val()) != password) {
            msg = 'Incorrect username or password';
            $(".modal-body").text(msg);
            $('#myModal').modal('show');

            ev.preventDefault();
        }
    });
});

话虽如此，我强烈建议您使用表单验证框架，因为它使您的代码更加模块化和可维护。我个人的偏好是jQuery Validate，它已经存在了很长时间并且效果很好，但是还有很多其他的（例如Parsley）。

【讨论】：

【解决方案3】：

固定：

$(document).ready(function() {
    $("form").submit(function(event) {
        event.preventDefault();
        if (($('input[name^=password]').val()) != "password") {
            msg = 'Incorrect username or password';
            $(".modal-body").text(msg);
            $('#myModal').modal('show');

        }
        else
        {
          $(this).submit();
        }
    });
});

PS：我还将password 更改为"password" 以避免出现 undefined var 错误。

工作引导：http://www.bootply.com/YstRWS1HB3

【讨论】：