Question

我的网站的移动版本有多个＆＃34;页面＆＃34;。这五个页面都在一个视图中，这些视图由div组成，这些div在从一个到另一个进展时被隐藏/显示。

所以当你第一次打开网站时，div1是可见的，div2，div3等是隐藏的。单击div1上的下一个按钮时，它会隐藏div1并使div2可见。我正在使用单击提交按钮时发生的MVC验证。验证很简单：要求字段具有值。这在活动（可见）div上工作正常，但如果div被隐藏（错误发生在上一页），则验证不起作用。

如何查找导致问题的文本字段的div？我想要的是能够在div3上点击提交，如果在div2上验证失败（例如），我想让div2再次可见。

以下是我的观点的简要设置。

<div id="div1>
    @Html.TextBoxFor(m => m.Name)<br />
    <span id="ValidBuyerName">@Html.ValidationMessageFor(m => m.Name)</span>
    <input type="button" id="btn_next1" value="Next &raquo;" />
</div>
<div id="div2>
    @Html.TextBoxFor(m => m.Address)<br />
    <span id="ValidBuyerAddress">@Html.ValidationMessageFor(m => m.Address) </span>
    <input type="button" id="btn_next2" value="Next &raquo;" />
</div>
<div id="div2>
    @Html.TextBoxFor(m => m.Phone)<br />
    <span id="ValidBuyerPhone">@Html.ValidationMessageFor(m => m.Phone)</span>
    <input id="btnSubmit" type="submit" value="Save" name="Save" />
</div>

这是我想要它做的（原始）图形示例：

--------------------------------
|                              |
|    | Name |                  |
|                              |
|    | Next |                  |
--------------------------------

点击下一个显示

--------------------------------
|                              |
|    | Address |               |
|                              |
|    | Next |                  |
--------------------------------

点击下一个显示

--------------------------------
|                              |
|    | Phone |                 |
|                              |
|    | Save |                  |
--------------------------------

如果地址为空，则单击保存显示

--------------------------------
|                              |
|    | Address |               |
|    Address is required       |
|    | Next |                  |
--------------------------------

正在发生的事情是允许使用空白地址提交页面（因为该div被隐藏）。

为了澄清，我已经有了验证集。它适用于所有div都可见的页面的非移动版本。所以我不需要知道如何设置验证。我需要知道的是如何找出哪个字段有验证问题，以便我可以看到它并显示错误。

我在这里找到了一段很好的代码： How to move focus to first error field with MVC client validation? 来自@ husein-roncevic，但只有在导致验证问题的字段已经显示时才有效。我尝试使用基本的想法来显示字段名称或其父div，但我无法弄清楚如何做到这一点。我认为这可能是一个很好的起点，我只是不确定显示字段名称或其父div的语法。也许有人可以帮我这个？

以下是其他代码。不确定这是否有用，但我试图预测其他人可能希望看到什么来帮助这个项目。

这是我点击下一个按钮时显示和隐藏div的方式：

$("#btn_next1").click(function () {
        $("#div1").css({ "display": "none" });
        $("#div2").fadeIn(1000);
        return status;
});

以下是如何在模型中设置验证：

    [Required(ErrorMessage = "Address is required")]
    public string Address { get; set; }

如果我能提供任何其他信息，请告诉我。我在这里写了很多，但基本的问题是如何找到div包含抛出验证错误的输入。

Answer 1

行！因此，我已经为您创建了此示例 DOT NET FIDDLE ，以说明如何完成此操作：

只需在js中添加以下功能.next点击

即可

$(function(){
    $('.submit').click(function(){
            if($('form').valid()) {//This is what validates your model
                    var step=$(this).data('value');
                    var nextStep=step.split(/(\d)/)[0]+(parseInt(step.split(/(\d)/)[1])+1);
                    if(step!=='step3')
                    {
                        $('.'+step).toggle('slow');
                        $('.'+nextStep).toggle('fast');
                        $(this).data('value',nextStep);
                        if(nextStep==='step3')
                        {
                            $(this).text('Submit');
                        }
                    }
                    else
                    {
                        alert('you can submit form here! because all validations are done');
                    }
            }
            else {
                closeAlert();
            }
    });
});

虚构的HTML：

@using (Html.BeginForm())
{
        <div class="form-group step1">
            @Html.LabelFor(m => m.Name)
            @Html.TextBoxFor(model => model.Name, new {@class="form-control"}) 
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="form-group step2">
            @Html.LabelFor(m => m.Address)
            @Html.TextBoxFor(model => model.Address, new {@class="form-control"}) 
            @Html.ValidationMessageFor(model => model.Address)
        </div>
        <div class="form-group step3">
            @Html.LabelFor(m => m.Phone)
            @Html.TextBoxFor(model => model.Phone, new {@class="form-control"}) 
            @Html.ValidationMessageFor(model => model.Phone)
        </div>
        <button type="button" data-value="step1" class="btn btn-success submit">Next</button>
}

要制作divs hide和show

的一些CSS

.step1{
        display:block;
}
.step2, .step3{
        display:none;
}

我希望其余的代码是不言自明的，小提琴将有助于 理解相同的

如何使用MVC验证找到包含带有验证错误的输入字段的div？

1 个答案: