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

(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>

如果用户通过页面底部的“提交/继续”按钮退出页面，则表单可以正常验证，但我希望表单还可以通过单击这些菜单链接来验证何时离开页面。< / p>

到目前为止我尝试过的事情：我已添加此脚本，以便菜单中的点击次数计为表单提交：

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

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

如何调整此值以使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();
});

如何使用jquery验证来防止通过菜单链接导航（如果表单无效）

1 个答案: