jquery - 无需提交的表单验证

Question

我正在使用 .NET MVC 3，使用 DataAnnotations 进行客户端字段验证。提交表单时一切正常，但是，表单很长，我们使用“下一步”按钮在发布之前显示和隐藏部分的 div。

我想验证表单，然后在不提交表单的情况下更改 div。我尝试了以下不同的变体，但表单总是被提交。

$('#btnNext').click(function (e) {
    if ($('form').valid()) {
        $('#div1').hide();
        $('#div2').show();
        return false;   
    }
    //return false;
});

任何帮助是极大的赞赏。谢谢

Answer 1

使用 preventDefault 停止提交的表单：

$('#btnNext').click(function (e) {
    e.preventDefault();
    if ($('form').valid()) {
        $('#div1').hide();
        $('#div2').show();
        return false;   
    }
    //return false;
});

Answer 2

添加一行e.preventDefault();以保持事件正常运行。

$('#btnNext').click(function (e) {
    e.preventDefault();
    if ($('form').valid()) {
        $('#div1').hide();
        $('#div2').show();
        return false;   
    }
    //return false;
});