javascript - 使用 Jquery.valid() 在 Asp.net MVC 中进行多表单验证

Question

这是我的场景，我有 3 个 Accordion 布局。每个 Accordion 包含 1 个表格。就这样

<div id="collapseOne">

@using(Html.BeginForm("","",FormMethod.Post,new{id="formOne"}))
{

    @Html.TextBoxFor(m=>m.Name)
    @Html.ValidationMessageFor(m=>m.Name)

    @Html.TextBoxFor(m=>m.City)
    @Html.ValidationMessageFor(m=>m.City)

    <input type="button" value="Next" id="btnOne" />

}

</div>
<div id="collapseTwo">


@using(Html.BeginForm("","",FormMethod.Post,new{id="formTwo"}))
{

    @Html.TextBoxFor(m=>m.Age)
    @Html.ValidationMessageFor(m=>m.Age)

    @Html.TextBoxFor(m=>m.Address)
    @Html.ValidationMessageFor(m=>m.Address)

    <input type="button" value="Next" id="btnTwo" />

}

</div>
<div id="collapseThree">

@using(Html.BeginForm("MyAction","MyController",FormMethod.Post,new{id="formThree"}))
{

     @Html.TextBoxFor(m=>m.Email)
     @Html.ValidationMessageFor(m=>m.Email)

     @Html.TextBoxFor(m=>m.City)
     @Html.ValidationMessageFor(m=>m.Email)

    <input type="submit" value="Finish" id="btnThree" />

}

</div>

现在，当我在上面的 Accordion 中按 Next Next 时，验证检查运行良好。但是，当有人直接来到第三个 Accordion 并尝试按完成时，它只会验证第三种形式。这是我的 jquery

function PageEvents(){
  $("#btnThree").click(function(event){
    event.preventDefault();
    if($("#formOne").valid()==false){
      // Open first Accordion
    }
    else if($("#formTwo").valid()==false){
      //Open second Accodion
    }
    else{
      if($("#formThree").valid()){
         $("#formThree").submit();
      }
    }
  });

$("#btnOne").click(function (event) {
    event.preventDefault();
    if ($("#formOne").valid()) {
        //trigger accordion two
        $("collapseTwo").trigger("click");
    }
});
$("#btnTwo").click(function (event) {
    event.preventDefault();
    if ($("#formTwo").valid()) {
        //trigger accordion two
        $("collapseThree").trigger("click");
    }
});

如果您想要更多描述，我会提供。请指导我如何验证那些尚未打开的表单，并且用户直接进入第三个 Accordion 并按完成按钮...

谢谢

Answer 1

您在验证隐藏字段时遇到问题，jquery 验证默认情况下不验证隐藏字段，您只需更改默认值即可:

$.validator.setDefaults({
    ignore: []
});

还可以购买可以禁用的选项卡，这是不允许的 here是如何做到这一点的示例。

但最好的方法是使用 miltistep Wizard，如 this .