使用jQuery.Validate

Question

我有一个如下所示的选项卡式面板：

“学生”选项卡具有StudentName，“标记”选项卡具有Math。这是我的模型：

public class StudentViewModel 
{
    [Required]
    public string StudentName { get; set; }

    [Required]
    public int Math { get; set; }
}

这是上面选项卡式面板的视图：

<form action="~/Controller/Action" method="Post" id="myFormId">
    <div class="panel-body">
        <div class="tab-content">
            <div class="tab-pane active" id="Student">
                @Html.EditorFor(m => m.StudentName)
                @Html.ValidationMessageFor(m => m.StudentName)
            </div>
            <div class="tab-pane" id="Mark">
                @Html.EditorFor(m => m.Math)
                @Html.ValidationMessageFor(m => m.Math)
            </div>
        </div>
    </div>
    <input type="submit" value="Submit" class="btn btn-success" />
</form>

整个选项卡式面板位于1种表单内，我正在使用jQuery.Validate 用户提交表单时验证表单。

如果数学字段上有验证消息并且学生姓名没有错误，我想切换到“标记”选项卡。使用jQuery.Validate实现此目的的最佳方法是什么？

Answer 1

一种选择是测试表单是否有效，如果无效，则查找由<span>生成的@Html.ValidationMessageFor()元素，并检查它们是否包含field-validation-error类。如果是这样，请切换到其父<div class="tab-pane">元素。

我假设您的标签页实际上包含多个表单控件（如果没有，那么您可能可以简化以下内容）

var tabs = $('.tab-pane'); // get all the tabs
$('#myFormId').submit(function() {
    if(!$(this).valid()) { // check if the form is valid
        $.each(tabs, function(index, item) {
            // Test if any errors for form controls in the tab
            if($(this).find('.field-validation-error').length > 0) { 
                // Change the active tab
                tabs.removeClass('active');
                $(this).addClass('active');
                return false; // exit the $.each() loop
            }
        });
    }
});

请注意，以上代码将激活包含无效控件的第一个标签。

另一种选择是使用MVC Force jQuery validation on group of elements中所述的Validator.element(element)函数，尽管当在两个选项卡之间切换时，这可能是更合适的代码运行（例如，如果有的话，防止移动到另一个选项卡当前标签上的验证错误）