Saltar al contenido

La validación discreta no funciona con Ajax.BeginForm

Solución:

Eso es porque la segunda vista se carga con AJAX en una etapa posterior y debe llamar $.validator.unobtrusive.parse(...)
inmediatamente después de que su contenido se inyecte en el DOM para permitir una validación discreta. Consulte la siguiente publicación del blog para obtener más detalles.

Entonces, en tu caso, en lugar de alertando en el OnSuccess devolución de llamada de la primera llamada AJAX, suscríbase a una función de javascript que invocará este método:

@using (Ajax.BeginForm(
    "Action1",
    "Controller",
    null,
    new AjaxOptions { 
        OnSuccess = "onSuccess",
        UpdateTargetId = "result"
    },
    null)
)
{
    <input type="submit" value="Save" />
}

y luego en su archivo javascript:

var onSuccess = function(result) {
    // enable unobtrusive validation for the contents
    // that was injected into the <div id="result"></div> node
    $.validator.unobtrusive.parse($(result));
};

Necesitas agregar esos 2 archivos en ti Vista parcial incluso si ya está en el Shared / _Layout.cshtml:

<script src="https://foroayuda.es/@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="https://foroayuda.es/@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

O coloque esto en su Parcial:

<script type="text/javascript" language=javascript>
    $.validator.unobtrusive.parse(document);
</script>

La respuesta de Darin Dimitrov solo funciona cuando validate() de El jquery validate plugin no se ha llamado hasta que se llama al controlador de éxito Ajax. No puedo pensar en un escenario en el que este podría ser el caso, por lo que me pregunto por qué se aceptó la respuesta como correcta.

Quizás un cambio en el código de validación de jquery en el pasado ahora causa el siguiente problema:

El problema es que validate() ejecuta la siguiente línea primero

// Check if a validator for this form was already created
var validator = $.data( this[ 0 ], "validator" );
if ( validator ) {
  return validator;

lo que significa que el El objeto de validación se devuelve cuando se llama a validate () sin y se pasa el manejo de las opciones..

Esto también significa que una llamada posterior a $.validator.unobtrusive.parse(...) o $.validator.unobtrusive.parseElement(...) que ejecuta un

$form.validate(this.options) <- this.options holds the new rules parsed from HTML

actualizar las opciones del validador no tiene ningún efecto porque las opciones no se procesan en absoluto.

La solución aquí es actualizar el validador manualmente como

var $htmlCode = $("your html");

$.validator.unobtrusive.parse($htmlCode, true); // true means no validate() call

// now get the validation info collected in parse()
var validationInfo = $form.data("unobtrusiveValidation"); 

var $validator = $form.validate(); // get validator and ...
$validator.settings.rules = validationInfo.options.rules; // ... update its rules
$validator.settings.messages = validationInfo.options.messages; // ... update its messages

Revalidar el formulario (por ejemplo, hacer clic en enviar) ahora debería dar los resultados esperados.

Aquí hay un ejemplo completo que también incluye código de la respuesta ya aceptada:

Maquinilla de afeitar

@using (Ajax.BeginForm(
    "Action1",
    "Controller",
    null,
    new AjaxOptions { 
        OnSuccess = "onSuccess",
        UpdateTargetId = "result"
    },
    null)
)
{
    <input type="submit" value="Save" />
}

Javascript

var onSuccess = function(result) {
    var $htmlCode = $(result);

    $.validator.unobtrusive.parse($htmlCode, true); // true means no validate() call

    // now get the validation info collected in parse()
    var validationInfo = $form.data("unobtrusiveValidation"); 

    var $validator = $form.validate(); // get validator and ...
    $validator.settings.rules = validationInfo.options.rules; // ... update its rules
    $validator.settings.messages = validationInfo.options.messages; // ... update its messages
};

Como nota al margen, la actualización manual del validador también es posible utilizando el rules() método como

$yourHtmlField.rules( "add", {
  required: true,
  messages: {
    required: "Required input"
  }
});

ya que esto actualiza directamente las reglas del validador sin las cosas discretas. Pero luego los atributos data-val se vuelven inútiles.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *