MVC Синтаксис проверки jQuery для группы элементов

Question

Моя форма, которую я проектирую с MVC 4, имеет mutiple DIVS со многими элементами в каждом из них. Моя цель - открыть/закрыть DIVS, когда пользователь заполнит поля. Тем не менее, я хочу использовать ненавязчивую проверку на каждом DIV, а не на всю форму. Это возможно без проверки каждого элемента отдельно? Может быть, использовать идентификатор DIV или что-то еще? Я не хочу создавать эту массивную функцию для проверки каждого элемента в каждом DIV, чтобы пользователь мог перейти к следующему DIV.

Я пытаюсь это, и это не работает:

var elems = []; 
var valid = true; 
("#Contact").find('.text_input').each(function() { 
    elems.push(this.id); 
    } 
    for (var i = 0; i<= elems.length; i++) { 
     if ($("#" + elems[i]) != undefined) { 
      $("#form1").validate().element("#" + elems[i])) 
      if ($("#" + elems[i]).valid()) { 
      } 
      else { 
      valid = false; 
      } 
     } 
    } 

, но я получаю сообщение об ошибке неопределенной. Элементы в DIV, которые имеют класс text_input, являются те, которые необходимы для проверки.

Answer 1

Вы можете проверить отдельные элементы управления с помощью Validator.element(element) - see documentation here, так что вы можете использовать следующий подход (вы не отправили мнение HTML поэтому не может писать фактический код для вас)

В следующем нажатии кнопки событие

1. Выберите все элементы управления в пределах связаны div - например var controls = $(this).closest('div').find('input, textarea, select');
2. В $.each петле, вызовите $("form").validate().element($(this));
3. При необходимости, испытание, если действующий с $(this).valid();
4. Если все действительно, скрыть текущий ДИВ и отобразить следующий

Редактировать (например, добавлены)

View

<div class="section"> 
    <h2>Section 1</h2> 
    .... // Your inputs and validation 
    @Html.LabelFor(m => m.SomeProperty) 
    @Html.TextBoxFor(m => m.SomeProperty) 
    @Html.ValidationMessageFor(m => m.SomeProperty) 
    <div class="error"></div> 
    <button type="button" class="next">Next</button> 
</div> 
<div class="section"> 
    <h2>Section 2</h2> 
    .... // Your inputs and validation 
    <div class="error"></div> 
    <button type="button" class="next">Next</button> 
</div> 
<div class="section"> 
    <h2>Section 3</h2> 
    .... // Your inputs and validation 
    <div class="error"></div> 
    <button type="submit" class="next">Submit</button> // submit button for last section 
</div> 

CSS

.section:not(:first-of-type) { 
    display:none; 
} 

Script

$('button').click(function() { 
    var container = $(this).closest('.section'); 
    var isValid = true;  
    $.each(container.find('input'), function() { 
    $('form').validate().element($(this)); 
    if (!$(this).valid()) { 
     isValid = false; 
     return false; 
    } 
    }); 
    if (isValid) { 
    container.next('.section').show().find('input').first().focus(); 
    container.hide(); 
    } else { 
    container.find('.error').text('please complete'); 
    } 
});