Как найти div, содержащий поле ввода с ошибкой проверки, используя проверку MVC?

У меня есть мобильная версия веб-сайта с несколькими «страницами». Все эти пять страниц представлены в одном представлении и состоят из разделов, которые скрыты/отображены по мере перехода от одного к другому.

Поэтому, когда вы впервые открываете сайт, 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. Поэтому мне не нужно знать, как установить валидацию. Что мне нужно знать, так это то, как узнать, какое поле имеет проблему проверки, чтобы я мог сделать его видимым, и появится ошибка.

Здесь я нашел хороший фрагмент кода: Как переместить фокус на первое поле ошибки при проверке клиента MVC? от @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 содержит ввод, выдающий ошибку проверки.


javascript validation html jquery asp.net-mvc-validation
person boilers222    schedule 02.06.2015    source источник
comment
почему бы вам не проверить click самого next!! Просто линия предложения ..   -  person Guruprasad J Rao    schedule 02.06.2015
comment
Звучит как хорошая идея, Гурупрасад Рао. Как запустить проверку MVC при нажатии кнопки, а не при отправке?   -  person boilers222    schedule 02.06.2015
comment
Я надеюсь, что вы создаете форму в каждом представлении! Поправьте меня, если я ошибаюсь! и если вы разместите здесь весь код просмотра или создадите MVCFiddle, чтобы описать свою проблему в более подробный способ, то было бы очень полезно решить эту проблему!   -  person Guruprasad J Rao    schedule 03.06.2015
comment
Есть только одно представление с несколькими div. Код представления довольно длинный, так как в нем много разделов. Вопрос в том, как мне определить div, в котором произошла ошибка. Я не думаю, что для предоставления этого ответа потребуется полный код. Мне нравится ваша идея проверки при каждом нажатии кнопки «Далее». Есть ли способ запустить проверку MVC без отправки всего представления?   -  person boilers222    schedule 03.06.2015
comment
Затем вам может понадобиться обернуть каждый вид div в form, а затем проверить его при нажатии кнопки!   -  person Guruprasad J Rao    schedule 03.06.2015

Ответы (1)


arrow_upward
0
arrow_downward

В порядке!! Поэтому я создал этот пример 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>
}

Немного CSS для создания divs hide и show

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

Я надеюсь, что остальные коды не требуют пояснений, а fiddle поможет понять то же самое

person Guruprasad J Rao    schedule 03.06.2015