使用 jQuery.Validate 显示正确的面板

Question

我有一个标签式面板，如下所示：

Student 选项卡包含 StudentName，而 Mark 选项卡包含 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

一个选项是测试表单是否有效，如果无效，找到由 @Html.ValidationMessageFor() 生成的 <span> 元素并检查它们是否包含 field-validation-error class.如果是这样，切换到其父 <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) 函数，尽管当您在选项卡之间切换时，这可能是运行更合适的代码（即防止移动如果当前选项卡上存在验证错误，则转到另一个选项卡）

使用 jQuery.Validate 显示正确的面板

Displaying correct panel using jQuery.Validate

asp.net-mvc

jquery

jquery-validate

unobtrusive-validation