Question

我有一个使用ASP.NET MVC编写的表单，我使用JQuery-UI手风琴分为三个部分：Info，Contact和Payment。

我已经设置了一个PaymentViewModel，其中包含必要的数据注释以进行验证。视图是使用内置脚手架创建的，然后，我一直在那里进行修改。

当我单击提交时，表单会正确验证（不是100％确定它是客户端还是服务器端）。但是，如果用户正确填写第一个手风琴选项卡（信息）但忽略其余选项并单击提交，则表单似乎不会提交。

它显示在第一个选项卡中输入的所有信息，如果您手动单击第二个或第三个选项卡，它会在第二个和第三个选项卡的输入框旁边显示验证错误消息。

我希望它能够通过第一个验证错误实例激活选项卡，以便用户知道他们错过了什么。即，在上面的示例中，第二个选项卡在单击提交时打开。

我尝试添加以下内容：

$(function () {
    $('#CreatePayment').submit(function () {

        $('#CreatePayment').validate({
            invalidHandler: function (event, validator) {
                if (validator.numberOfInvalids() > 0) {
                    validator.showErrors();
                    var index = $(".input-validation-error")
                        .closest(".ui-accordion-content")
                        .index(".ui-accordion-content");
                    console.log(index);
                    $(".accordion").accordion("option", "active", index);
                }
            },
            ignore: [],
        });

    });
});

但它仍在做同样的事情.. 有没有人知道实现我上面描述的方法？

简化细节： PaymentViewModel：

// Tab1
[Required]
public String Info1 { get; set; }
[Required]
public String Info2 { get; set; }
[Required]
public String Info3 { get; set; }

// Tab2
[Required]
public String Name { get; set; }
[Required]
public String Address { get; set; }
[Required]
[DataType(DataType.EmailAddress)]
public String Email { get; set; }

// Tab3
[Required]
public String ccName{ get; set; }
[Required]
public String CardNo{ get; set; }
[Required]
public String ccExpiry{ get; set; }

查看：

@using (Html.BeginForm("Create", "Payment", FormMethod.Post, new { id = "CreatePayment" }))
{
    @Html.AntiForgeryToken()

...
    <div id="accordion">
    <h3>Info</h3> <!-- Tab1 -->
    .. UNTOUCHED SCAFFOLDED FORM ... 

    <h3>Contact</h3> <!-- Tab2 -->
    .. UNTOUCHED SCAFFOLDED FORM ... 

    <h3>Payment</h3> <!-- Tab3 -->
    .. UNTOUCHED SCAFFOLDED FORM ... 

    @section Scripts {

    <script src="~/Scripts/jquery.validate.js"></script>

    <script>
        $(function () {
            $('#CreatePayment').submit(function () {
                $('#CreatePayment').validate({
                    invalidHandler: function (event, validator) {
                        if (validator.numberOfInvalids() > 0) {
                            validator.showErrors();
                            var index = $(".input-validation-error")
                                .closest(".ui-accordion-content")
                                .index();
                            console.log(index);
                            $(".accordion").accordion("option", "active", index);
                        }
                    },
                    ignore: [],
                });

            });
        });
        $(function () {
            $("#accordion").accordion({
                heightStyle: "content"
            });
        });
    </script>

感谢。

我尝试使用Chrome javascript调试器，在console.log(index);上放置一个断点，但代码从未停止过。进一步调查表明，只有在$('#CreatePayment').validate({线上放置断点时才会停止。之后的任何事情都会被跳过？

Answer 1

看起来你唯一的问题就是这些问题：

var index = $(".input-validation-error")
    .closest(".ui-accordion-content")
    .index(".ui-accordion-content");

当您将选择器传递给index时，它会在当前上下文中查找该选择器。换句话说，它正在尝试在 .ui-accordion-content内找到.ui-accordion-content 的索引。这显然不正确。如果您将其更改为：

var index = $(".input-validation-error") .closest(".ui-accordion-content") .index();

它应该工作，因为它将返回当前所选jQuery元素的索引（.ui-accordion-content）

在ASP.NET验证中打开手风琴表单面板

1 个答案: