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

时间:2014-12-11 08:10:30

标签: javascript jquery asp.net asp.net-mvc validation

这是我的场景我有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时,验证检查表现良好。 但当有人直接进入第三手风琴并尝试按完成时,它只验证第三种形式。 这是我的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");
    }
});

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

由于

1 个答案:

答案 0 :(得分:2)

您对validatin隐藏字段有疑问,默认情况下jquery验证不验证隐藏字段,您只需更改默认字段:

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

购买你也可以使用diasble标签,不应该被允许here是如何做的示例。

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