Validación MVC Force jQuery en un grupo de elementos

Mi formulario que estoy diseñando con MVC 4 tiene DIVS múltiples con muchos elementos en cada uno. Mi objective es abrir / cerrar DIVS a medida que el usuario completa los campos. Sin embargo, quiero usar la validación discreta en cada DIV, en lugar de la forma completa. ¿Es eso posible sin verificar cada elemento individualmente? Tal vez usando una identificación DIV o algo así? No quiero construir esta función masiva para verificar cada elemento en cada DIV solo para que el usuario pueda pasar al siguiente DIV.

Estoy intentando esto y no está funcionando:

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; } } } 

pero sigo recibiendo un error indefinido Los elementos en el DIV que tienen la clase text_input son los que requieren validación.

Puede validar controles individuales utilizando Validator.element(element) ; consulte la documentación aquí , para que pueda usar el siguiente enfoque (no ha publicado las vistas html, por lo que no puede escribir el código real para usted)

En el botón Siguiente, haga clic en evento

  1. Seleccione todos los controles dentro del div asociado – por ejemplo var controls = $(this).closest('div').find('input, textarea, select');
  2. En un bucle $.each , llame a $("form").validate().element($(this));
  3. Si es necesario, prueba si es válido con $(this).valid();
  4. Si todo es válido, oculte el div actual y muestre el siguiente

Editar (ejemplo agregado)

Ver

 

Section 1

.... // Your inputs and validation @Html.LabelFor(m => m.SomeProperty) @Html.TextBoxFor(m => m.SomeProperty) @Html.ValidationMessageFor(m => m.SomeProperty)

Section 2

.... // Your inputs and validation

Section 3

.... // Your inputs and validation
// submit button for last section

CSS

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

Guión

 $('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'); } });