0

我正在使用 jQuery Validate，并且我有一个分成几个部分的表单。提交时它会验证并且我正在返回包含所有错误的错误框方法。我希望能够将它们指定为链接，因此单击错误会将用户带到该字段。开箱即用？

js：

$('#form').validate({
    rules: {
        firstname:   {required: true},
        lastname:    {required: true},
        email:       {required: true},
    },
    messages: {
        firstname:   {required: "Step 2: Your first name is required."},
        lastname:    {required: "Step 2: Your last name is required."},
        email:       {required: "Step 2: Your email is required."},
    },
    errorContainer: "#error_container",
    errorLabelContainer: "#error_container ul",
    wrapper: "li",
    submitHandler: function() {
            ajax('{{=URL('new_post')}}',
    }
});

它生成的 HTML 如下所示：

<div id="error_container">
    <ul><li><label for="firstname" generated="true" class="error_two" style="display: inline;">Step 2: Your first name is required.</label></li></ul></div>

如果可能的话，我希望这个链接回名字字段。谢谢。

编辑：我发现我解释得不够好。我希望它生成的 HTML如下：

<div id=error_container">
    <ul>
        <li>
            <a href="link_to_field">Your first name is required.</a>
        </li>
    </ul>
</div>

它在哪里创建可点击的锚点回到各自的字段。有什么办法可以做到这一点？我已经看到下面列出的“关注错误”方法，这当然是同时做到这一点的好方法，但我希望能够让用户单击任何错误并以他们的任何顺序转到这些字段选择。它以多步骤格式工作，这就是我想要这个的原因，否则，它就在那里，他们可以正常单击每个字段。

4

1 回答 1

1

  • 快速的方法是使用验证选项focusInvalid，它将关注最后一个活动或第一个无效元素提交

    $('#form').validate({
   .
   focusInvalid: true,
   .
});

  • 应该实现您想要做的很长的路要走，就是在 validate 选项中使用 showError 回调

    $('#form').validate({
   .
   showErrors: function(errorMap, errorList) {
       // errorMap - the map of errors
       // errorList - array of errors
       // construct the list of error items with links that focus on the invalid elements

       // default behavior
       this.defaultShowErrors();
   },
   .
}
于 2012-07-20T09:23:50.180 回答