Establecer la validación de clase para el cuadro de texto dynamic en una tabla

Tengo una tabla que tiene una fila de cuadro de texto dynamic. Ejemplo a continuación:

enter image description here

Agrego la fila en la tabla haciendo clic en el [+] Agregar nuevo objective, aparecerá una pantalla a continuación:

enter image description here

Quiero agregar una clase de validación a todo el cuadro de texto dentro de la tabla. Entonces, cuando el usuario haga clic en el botón Guardar, se marcará todo el cuadro de texto.

Intento usar este jquery para esto:

$('#tbTargetDetails tr').each(function () { $(this).find('td input:text').each(function (i,a) { // get each of the textbox and add validation class to it }); }); 

Estoy usando MVC 5, jquery-1.10.2.js, jquery-1.10.2.min.js, jquery.validate * y Site.css que tienen clase input.input-validation-error

En mis modelos:

  public class ClsTargetInfo { public string ItemNumber_Target { get; set; } [Required] public string TargetColor_U { get; set; } [Required] public string TargetColor_V { get; set; } [Required] public string D90Target_U { get; set; } [Required] public string D90Target_V { get; set; } [Required] public string D10Target_U { get; set; } [Required] public string D10Target_V { get; set; } [Required] public string Thickness { get; set; } [Required] public string FilmWidth { get; set; } [Required] public string TargetDate { get; set; } } 

Llamo al modelo anterior dentro de otro modelo:

 public class abc { public IList TargetInfo { get; set; } } 

A continuación está el código cuando agrego la nueva fila:

  $("#btnAddTarget").on("click", function (event) { AddTargetItem(jQuery('#txtTargetColorU').val(), jQuery('#txtD90TargetU').val(), jQuery('#txtD10TargetU').val(), jQuery('#txtTargetColorV').val(), jQuery('#txtD90TargetV').val(), jQuery('#txtD10TargetV').val(), jQuery('#txtThickness').val(), jQuery('#txtFilmWidth').val(), jQuery('#TargetDate').val()); }); function AddTargetItem(TargetColor_U, D90Target_U, D10Target_U, TargetColor_V, D90Target_V, D10Target_V, Thickness, FilmWidth, TargetDate) { var rowCount = $('#tbTargetDetails tr').length; //minus 1 row for header rowCount = rowCount - 2; var rowCountBil = rowCount + 1; var row = ''; row += '' + rowCountBil + ''; row += ''; row += ''; row += ''; row += ''; row += ''; row += ''; row += ''; row += ''; row += ''; row += 'Item Lookup'; row += ''; //Hide the previous delete button $('#tbTargetDetails tr:last .deleteLink').hide('fast'); $('#tbTargetDetails tr:last').after(row); } 

Por favor ayuda a resolver mi problema. Realmente aprecio tu ayuda chicos. Gracias.

No está incluyendo los atributos de data-val necesarios para los cuadros de texto ni los elementos de marcador de posición para mostrar los mensajes de validación, que jquery.validate.unobtrusive.js utiliza para realizar la validación del lado del cliente. Además, su implementación actual no le permite al usuario eliminar nada que no sea la última fila que puede resolverse incluyendo una entrada oculta para el indexador que permite que los indexadores no consecutivos se publiquen y se vinculen a su colección.

Primero comience agregando un objeto ClsTargetInfo predeterminado a su propiedad TargetInfo y genere su html en la vista

  // add an id attribute ..... // add an id attribute for(int i = 0; i < Model.TargetInfo.Count; i++) {  .... // other columns  } 
@Html.TextBoxFor(m => m.TargetInfo[i].TargetColor_U, new { id="", @class="form-control" }) // remove the unnecessary id attribute @Html.ValidationMessageFor(m => m.TargetInfo[i].TargetColor_U) // Add the following hidden input to only one column in the row @Html.TextBoxFor(m => m.TargetInfo[i].TargetColor_V, new { id="", @class="form-control" }) // remove the unnecessary id attribute @Html.ValidationMessageFor(m => m.TargetInfo[i].TargetColor_V)

Luego inspeccione el html que genera para el elemento

que debería verse como

       ....  

y copiarlo dentro de un elemento oculto que se coloca fuera de las tags de formulario y reemplazar todas las instancias del indexador con un carácter ficticio, por lo que name="TargetInfo[0].TargetColor_U" convierte en name="TargetInfo[#].TargetColor_U" ), y también reemplaza el atributo de value de la entrada oculta para que value="0" se convierta en value="#"

  .... // copy the tr element and its contents here  

Entonces, el script se verá como

 var form = $('form'); // or use the id if you have given the form an id var newrow= $('#newrow'); var tablebody = $('#tablebody'); // modify to suit your id $("#btnAddTarget").click(function() { var index = (new Date()).getTime(); // unique indexer var clone = newrow.clone(); // clone the new row clone.html($(clone).html().replace(/#/g, index)); // update the indexer of the clone var row = clone.find('tr'); tablebody.append(row); // add the new row to the table // Reparse the validator form.data('validator', null); $.validator.unobtrusive.parse(form); }); 

Notas al margen:

  1. La validación no intrusiva funciona analizando los atributos data-val cuando el formulario se procesa por primera vez. Cuando agrega contenido dynamic, es necesario volver a analizar el validador como se indica en las últimas 2 líneas del script.
  2. La adición de la entrada oculta para el indexador le permite eliminar cualquier fila en la colección, por lo que eliminar el botón “eliminar” ya no es necesario y le dará al usuario una mejor experiencia.
  3. En lugar de usar estilos en línea, utilice css en su lugar, por ejemplo, en lugar de

    , debe usar #table td { padding: 0; } #table td { padding: 0; } en su archivo .css

  4. Si bien agregar las filas puramente del lado del cliente brinda el mejor rendimiento, es difícil de mantener. Si agrega o cambia algún atributo de validación en sus propiedades (por ejemplo, puede agregar más tarde un atributo [StringLength] ), deberá actualizar el html para que se ajuste. Como alternativa, puede considerar utilizar el asistente BeginCollectionItem, lo que significa que tiene una vista parcial (que representa una fila de la tabla). Para elementos existentes, utiliza un bucle foreach con @Html.Partial() y para filas nuevas, usa ajax para llamar a un método de controlador que devuelve una vista parcial y actualiza el DOM