jquery - ejemplos - django

validación del lado del cliente con campo agregado dinámicamente

Question

Estoy utilizando el complemento de validación discreto de jQuery con ASP.NET MVC. Todos los campos que se representan en el servidor se validan correctamente.

Sin embargo, si agrego dinámicamente un campo en el formulario utilizando JavaScript, no se valida aunque tenga los atributos apropiados de data-* HTML5 data-* .

¿Alguien puede guiarme en la dirección correcta sobre cómo puedo lograr este objetivo?

Answer 1

Aquí hay una publicación de blog que puede serle útil y que debería ponerlo en el camino correcto. Método de extensión tomado de allí:

/// <reference path="jquery-1.4.4.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />

(function ($) {
  $.validator.unobtrusive.parseDynamicContent = function (selector) {
    //use the normal unobstrusive.parse method
    $.validator.unobtrusive.parse(selector);

    //get the relevant form
    var form = $(selector).first().closest(''form'');

    //get the collections of unobstrusive validators, and jquery validators
    //and compare the two
    var unobtrusiveValidation = form.data(''unobtrusiveValidation'');
    var validator = form.validate();

    $.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
      if (validator.settings.rules[elname] == undefined) {
        var args = {};
        $.extend(args, elrules);
        args.messages = unobtrusiveValidation.options.messages[elname];
        $(''[name="'' + elname + ''"]'').rules("add", args);
      } else {
        $.each(elrules, function (rulename, data) {
          if (validator.settings.rules[elname][rulename] == undefined) {
            var args = {};
            args[rulename] = data;
            args.messages = unobtrusiveValidation.options.messages[elname][rulename];
            $(''[name="'' + elname + ''"]'').rules("add", args);
          }
        });
      }
    });
  }
})($);

y entonces:

var html = "<input data-val=''true'' "+
           "data-val-required=''This field is required'' " +
           "name=''inputFieldName'' id=''inputFieldId'' type=''text''/>;
$("form").append(html);

$.validator.unobtrusive.parseDynamicContent(''form input:last'');

Se actualizó para agregar la corrección a la que se hace referencia en los comentarios de la publicación del blog; de lo contrario, se producen errores js.

Answer 2

Para que la respuesta de Darin funcione, cambié la siguiente línea:

$.validator.unobtrusive.parse(selector); 

A esto:

 $(selector).find(''*[data-val = true]'').each(function(){
    $.validator.unobtrusive.parseElement(this,false);
 });

Aquí está la muestra completa:

(function ($) {
  $.validator.unobtrusive.parseDynamicContent = function (selector) {
    // don''t use the normal unobstrusive.parse method
    // $.validator.unobtrusive.parse(selector); 

     // use this instead:
     $(selector).find(''*[data-val = true]'').each(function(){
        $.validator.unobtrusive.parseElement(this,false);
     });
    
    //get the relevant form
    var form = $(selector).first().closest(''form'');

    //get the collections of unobstrusive validators, and jquery validators
    //and compare the two
    var unobtrusiveValidation = form.data(''unobtrusiveValidation'');
    var validator = form.validate();

    $.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
      if (validator.settings.rules[elname] == undefined) {
        var args = {};
        $.extend(args, elrules);
        args.messages = unobtrusiveValidation.options.messages[elname];
        $(''[name="'' + elname + ''"]'').rules("add", args);
      } else {
        $.each(elrules, function (rulename, data) {
          if (validator.settings.rules[elname][rulename] == undefined) {
            var args = {};
            args[rulename] = data;
            args.messages = unobtrusiveValidation.options.messages[elname][rulename];
            $(''[name="'' + elname + ''"]'').rules("add", args);
          }
        });
      }
    });
  }
})($);

$.validator.unobtrusive.parse llama internamente al método parseElement, pero cada vez envía el parámetro isSkip a true, por lo que con este valor

if (!skipAttach) {
    valInfo.attachValidation();
}

este código en jquery.unobtrusive.js no asocia la validación al elemento y solo encontramos datos de validación de las entradas que estaban inicialmente presentes en la página.

Tenga en cuenta que la respuesta de Darin anterior es correcta y puede encontrar en el blog al que se refirió que muchas personas han resuelto el problema utilizando el código de xhalent (publicado por darin). por qué no funcionó está más allá de mi comprensión. Además, puedes encontrar muchas posts que te dicen que solo llama

$.validator.unobtrusive.parse(selector) 

es suficiente para validar el contenido cargado dinámicamente

Answer 3

Respuesta más simple:

Estoy usando MVC 4 y JQuery 1.8. Llegué a una función modular que acepta el objeto jQuery del elemento recién agregado:

function fnValidateDynamicContent($element) {
    var $currForm = $element.closest("form");
    $currForm.removeData("validator");
    $currForm.removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse($currForm);
    $currForm.validate(); // This line is important and added for client side validation to trigger, without this it didn''t fire client side errors.
}

Por ejemplo, si agregó una nueva tabla con id tblContacts , puede invocar de esta manera:

fnValidateDynamicContent($("#tblContacts"))