Usando una validación discreta en ASP.NET MVC 3, ¿cómo puedo tomar medidas cuando un formulario no es válido?

Question

Tengo una página con pestañas jQuery UI y un solo campo obligatorio en la primera pestaña. La validación funciona, y el mensaje de validación aparece junto al campo si el usuario no ha ingresado un valor. Sin embargo, si el usuario no está en la primera pestaña, no es obvio que el campo no es válido.

En este caso, me gustaría mostrar la primera pestaña, pero no estoy seguro de cómo registrar una devolución de llamada para un evento 'no válido', si lo hay.

también han considerado que muestra un resumen de validación encima de las pestañas, las cuales serían visibles independientemente de la ficha que el usuario está encendido, pero mi preferencia sería la de llevar al usuario al campo.

He intentado mirar a través del archivo de jquery.validate.unobtrusive.js, y parece que se extienden jquery.validate.js. En cuanto a la documentación de jquery.validate, veo que hay una opción invalidHandler que se puede pasar a la validate method, pero no sé cómo hacer uso de esto, ya que el método es llamado por jquery.validation.unobtrusive.

Me siento un poco perdido aquí, por lo que cualquier ayuda sería apreciada!

Editar

Nunca supe la respuesta, pero estaba a la altura con una solución, que he publicado a continuación. Aún así, espero que alguien responda con una mejor manera de hacer esto.

Answer 1

terminé validar y enviar el formulario de forma manual:

$("#save-button").button().click(function() { 
    if (!$("#profile-form").valid()) { 
     if ($("#tabs").tabs("option", "selected") > 0) { 
      $("#tabs").tabs("option", "selected", 0); 
     } 
     return false; 
    } 
    $("#profile-form").submit(); 
}); 

Answer 2

es posible que desee search para la función errorPlacement()

Answer 3

trate de añadir un nuevo adaptador de discreto.

Mi marcado ve diferente porque solía Telerik en lugar de jQuery UI para crear las pestañas. Esto es lo que mi marcado parecía después de pasar por Validador (es decir, con los errores de validación insertados a través de la secuencia de comandos no obstructivo)

<div id="rItemTabs"> 

    <ul> 
     <li><a href="#rItemTabs-1">Tab 1</a></li> 
     <li><a href="#rItemTabs-2">Tab 2</a></li> 
    </ul> 
    <!-- End Tab Nav--> 

    <!-- Begin Tab Contents --> 
    <div id="rItemTabs-1"> 
     <div class="editor-label"> 
      <label for="Title">Title</label> 
     </div> 
     <div class="editor-field"> 
      <input id="Title" class="input-validation-error name="Title"> 
      <span class="field-validation-error">*</span> 
     </div> 
    </div> 

    <div id="rItemTabs-2"> 
     <div class="editor-label"> 
      <label for="Title">Title</label> 
     </div> 
     <div class="editor-field"> 
      <input id="Title" class="input-validation-error name="Title"> 
      <span class="field-validation-error">*</span> 
     </div> 
    </div> 

</div> 

El objetivo de este guión es ir a través de cada div en "Contenido Tab", buscar la " campo de validación-error" clase (que sólo debe existir si hay un error), y si esta clase se encontró cambio del color del artículo Nav Tab asociado (es decir, la ID del contenido pestaña es el mismo de la href de pestaña elemento de navegación).

$.validator.unobtrusive.adapters.add(
    'tab-validation', 
    function() { 
     var tabs = $('#rItemTabs [id*=rItemTabs]'); 
     $(tabs).each(function() { 
     if ($(this).has('.field-validation-error').length) { 
      var tabId = '#' + $(this).attr('id'); 
      $('a[href=' + tabId + ']').css({ 'color': 'red', 'font-weight': 'bolder' }); 
     } 
    }); 
} (jQuery)); 

Espero que esto tenga sentido y que funcione para usted.

Answer 4

Este código tomado de here va a hacer lo que quiere:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myForm").submit(function() { 
      $("#tabs").tabs("select", $("#myForm .input-validation-error").closest(".ui-tabs-panel").get(0).id); 
     }); 
    }); 
</script> 

Le llevará a la primera pestaña que tiene un error. Está funcionando muy bien en un proyecto que estoy desarrollando ...

Answer 5

Aquí está la solución que funcionó para mí:

<button type="submit" onclick="ValidateRequired();">Save</button> 

function ValidateRequired(){ 
    $(':input[required]', '#myForm').each(function(){ 
     if ($(this).val() == ''){ 
      var errorTab = $(this).closest('div').attr('id'); 
      $('#tabs').tabs('select', '#'+errorTab); 
     } 
    }); 
}