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

Posted 2023-05-08

【中文标题】使用 jQuery.Validate 显示正确的面板

【英文标题】：Displaying correct panel using jQuery.Validate

【发布时间】：2018-12-18 21:26:57

【问题描述】：

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

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 实现这一目标的最佳方法是什么？

【问题讨论】：

你是否也在使用 mvc 的客户端验证，使用 jquery.validate.unobtrusive.js？ （你没有任何@Html.ValidationMessageFor() 元素）

对不起，我是。我会更新我的问题。

在这种情况下，您可以使用Validator.element(element)验证单个控件或控件组

现在没时间，30分钟左右会加例子

@StephenMuecke，非常感谢

【参考方案1】：

一种选择是测试表单是否有效，如果无效，则查找由@Html.ValidationMessageFor() 生成的<span> 元素并检查它们是否包含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) 函数，尽管这可能更适合在您在选项卡之间切换时运行的代码（即，如果在当前标签）