如何使用jquery验证来阻止通过菜单链接进行导航(如果表单无效)

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>

如果用户通过页面底部的submit / continue按钮退出页面，则表单可以很好地验证，但我希望表单也可以在用户试图通过单击这些菜单链接离开页面时进行验证。

到目前为止我尝试过的:我已经添加了这个脚本，这样菜单中的点击就会被算作表单提交：

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

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

我如何调整它，使jquery验证器阻止这些链接工作？

谢谢。

Answer 1

这是由于锚标记的默认操作造成的。

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

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

$('#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();
});