0

我有一个表格：

<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 validate 插件验证：

(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 验证器阻止这些链接工作？

谢谢你。

4

1 回答 1

2

这是由于锚标签的默认操作而发生的。

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

不要将点击事件添加到#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();
});
于 2012-09-29T02:13:52.360 回答