ASP.NET MVC La validación de Jquery no se activará si se carga parcialmente mediante ajax

Question

Estoy usando la opción de validación de jquery para realizar la validación del lado del cliente en una vista parcial. La vista parcial se carga a través de ajax en un diálogo modal usando la url (casi como Html.RenderAction).

Sin embargo, cuando la visión parcial se carga los metadatos de validación no hay salida a la page.Normally que se vería algo como esto:

//<![CDATA[ 
3if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; } 
4window.mvcClientValidationMetadata.push({"Fields":[],"FormId":"form0","ReplaceValidationSummary":false}); 
5//]]> 

Mi pregunta es muy similar a éste ASP.NET MVC 2 loading partial view using jQuery - no client side validation pero Don No quiero tener que usar la validación de Microsoft ya que estoy familiarizado con jQuery.validate.

Answer 1

Por favor, echa un vistazo a este enlace: Executing Dynamically Loaded JavaScript
Se contiene correcciones que suponen para ejecutar javascript en las vistas parciales de carga dinámica (a través de AJAX).

Answer 2

lo que entiende de su problema es que en la actualización parcial de la página los elementos DOM correspondientes se vuelven a insertar, es decir, son nuevos y no tienen la inicialización $ .validate requerida.

Estaba pensando que de alguna manera podría usar $ .live/$. Livequery para unir objetos $ .validate a esos campos, por lo que después de cada actualización parcial de la página el código jquery reinicializaría $ .validate en esos campos. Puede ser que puedas usar una clase css para marcar esos elementos DOM.

Lo que estoy sugiriendo es un tipo de enlace tardío y uso de los eventos más recientes relacionados con la inserción de DOM.

Espero que esto ayude !!

Answer 3

Tuve problemas similares al cargar javascript cuando puse contenido dinámicamente en el DOM. ¿Cómo estás insertando el contenido en el DOM? Hay algunos métodos de jQuery que despojan a cabo el javascript al insertar tratar de usar esto:

$("#mydiv").html(newContent); 

Espero que esto ayude!

Answer 4

Si entendí correctamente su problema, podría ser útil.

En el ejemplo siguiente, estoy usando Ajax.BeginForm para actualizar div (id = "div_to_update"), pero también podría ser otro método.

Lo importante es OnSuccess, que inicia el método a continuación. Eso actualizará el contenido div y ejecuta todos los javascripts incluyendo su validación jquery. Originalmente encontré esta solución de los foros de Telerik.

<div id="div_to_update"> 
<% using (Ajax.BeginForm("Translations", new { Model.Id }, new AjaxOptions { OnSuccess = "updatePlaceholder", UpdateTargetId = "div_to_update", InsertionMode = InsertionMode.Replace }, new { id = "translationAjaxForm" })) 
<% } %> 

<script type="text/javascript"> 
    function updatePlaceholder(context) { 
     // the HTML output of the partial view 
     var html = context.get_data(); 

     // the DOM element representing the placeholder 
     var placeholder = context.get_updateTarget(); 

     // use jQuery to update the placeholder. It will execute any JavaScript statements 
     $(placeholder).html(html); 

     // return false to prevent the automatic update of the placeholder 
     return false; 
    } 
</script> 
</div> 

Answer 5

Quizás estoy confundido pero podría simplemente llamar a validar en el envío y no enviar si falla?

$(function() { 
    $("form:first").validate({ .. options for validator .. }); 

    $("submit").click(function() { 
     if(!$("form:first").valid()){ 
      return false; 
     } 
     // Submit form here 
    }); 

}); 

Answer 6

Tuve este problema y así es como lo resolví.

Abra MicrosoftMvcJQueryValidation.js y realice los siguientes cambios.

Añadir esta función

function __MVC_ApplyClientValidationMetadata() { 
    var allFormOptions = window.mvcClientValidationMetadata; 
    if (allFormOptions) { 
     while (allFormOptions.length > 0) { 
     var thisFormOptions = allFormOptions.pop(); 
     __MVC_EnableClientValidation(thisFormOptions); 
     } 
    } 
} 

Encuentra el $ (document).ready() y sustituirla por

$(document).ready(__MVC_ApplyClientValidationMetadata); 

Ahora acaba de hacer lo siguiente

Si utiliza html() entonces simplemente llamar __MVC_ApplyClientValidationMetadata después de cargar el código HTML en el elemento.

$("#someDiv").html(responseHtml); 
__MVC_ApplyClientValidationMetadata(); 

Si utiliza load(), entonces tiene otro problema. Quita todas las etiquetas de script. Entonces tienes que hacer algo como lo siguiente.

$("#someDiv").load("https://stackoverflow.com/a/partialview/request" , function(response){ 
    var scripts = $(response).filter("script"); 
    for (var i = 0; i < scripts.length; i++) { 
     //executes javascript 
     $.globalEval(scripts[i].text); 
    } 
    __MVC_ApplyClientValidationMetadata(); 
}); 

Una cosa más. Asegúrese de que los formularios que carga con ajax tengan una identificación única. Por defecto, todos los formularios obtienen un id de form0.

Answer 7

Parte del problema es el hecho de que el script incluido en la respuesta no se ejecuta. En mi caso he tenido que trabajar con una solución basada en jcruz solución', que selecciona la secuencia de comandos de la forma determinada ajax:

var scripts = $('div#id_of_ajax_form>script'); 
for (var i = 0; i < scripts.length; i++) { 
    //executes javascript 
    $.globalEval(scripts[i].text); 
} 

La segunda parte del problema es el hecho de que la validación de Microsoft se está inicializando después la carga una llamada a Sys.Mvc.FormContext._Application_Load. Así que después de ejecutar la secuencia de comandos es necesario, que contiene las especificaciones de campo de validación, que llamo la misma función que se está llamando en la carga de documento:

Sys.Mvc.FormContext._Application_Load(); 

esperanza esto ayuda. Cualquier comentario sería apreciado mucho.