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

Question

这是我的场景，我有 3 个手风琴布局。每个手风琴包含 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>

现在，当我在上面的手风琴中按 Next Next 时，验证检查做得很好。 但是当有人直接来到 3rd 手风琴并尝试按完成时，它只验证 3rd 形式。 这是我的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");
    }
});

如果您需要更多描述，我会提供。 请指导我如何验证那些尚未打开的表单，用户直接进入 3rd 手风琴并按下完成按钮...

谢谢

Answer 1

你有验证隐藏字段的问题，jquery验证默认不验证隐藏字段，你可以改变默认：

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

购买也可以禁用标签，这是不允许的here 示例如何做到这一点。

但最好的方法是使用像 this 这样的 miltistep 向导。