javascript - 如何使用 jquery validate 来防止通过菜单链接进行导航(如果表单无效)

Question

我有一个表格:

<form id="myform" method="post" action="www.wherever.com/page2">

<div class="question">
 <label for="q1">What is your name?</label>
 <input id="q1" name="q1" size="10" maxlength="10"/>
</div>

<input type="submit" value="Continue" />

</form>

由 jquery 验证插件验证:

(function($,W,D)
{
    var VALIDATE = {};

    VALIDATE.UTIL =
    {
        setupFormValidation: function()
        {
            $("#myform").validate({
                rules: {
                    q1: {required: true},                           
                    },

                messages: {
                    q1:     {
                        required: "Answer the question",
                            },  

                },
                submitHandler: function(form) {
                    form.submit();
                }
            });

        }
    }

    $(D).ready(function($) {
            jQuery.validator.setDefaults({
                errorPlacement: function(error, element) {
                    if (element.hasClass("errorleft")) {
                       error.insertBefore(element);
                    }else{error.insertAfter(element);}
                }
            });


        VALIDATE.UTIL.setupFormValidation();
    });

})(jQuery, window, document);

我还有一个侧栏菜单，允许用户在表单内跳转(这是一个多页表单，每个页面在此菜单中都有一个链接

<div id="leftmenu" class="leftmenu">
<ul id="sidebarmenu1">
<li><a href="?page=introduction">Page 1</a></li>
<li><a href="?page=introduction-2">Page 2</a></li>
<li><a href="?page=survey-2">I: Page 3</a></li>
</ul>
</div>

如果用户通过页面底部的提交/继续按钮退出页面，则表单验证效果很好，但我希望当用户尝试通过单击这些菜单链接离开页面时，表单也能验证。

到目前为止我已经尝试过: 我添加了此脚本，以便菜单中的点击算作表单提交:

$('#leftmenu').click(function() {  
    $('#myform').submit();
});

当这些点击发生时，我可以看到验证错误起作用，但浏览器仍然离开页面 - 与通过继续按钮提交表单时不同。

如何调整它以便 jquery 验证器阻止这些链接工作？

谢谢。

Answer 1

发生这种情况是因为 anchor 标记的默认操作。

表单已提交，但由于默认行为，它被重定向到不同的页面..

不要将点击事件添加到#leftmenu，而是将其添加到 anchor ，并确保停止默认操作。

$('#leftmenu a').on('click',function(e) {

    // Prevents the default action of
    // redirecting to the page specified.
    e.preventDefault();
    // Submit the form which will validate
    $('#myform').submit();
});