Imposta la convalida della class per una casella di testo dynamic in una tabella

Ho una tabella che ha una riga di testo dinamico. Esempio di seguito:

inserisci la descrizione dell'immagine qui

Aggiungo la riga nella tabella facendo clic su [+] Aggiungi nuovo target: verrà visualizzata la seguente schermata:

inserisci la descrizione dell'immagine qui

Voglio aggiungere una class di convalida a tutta la casella di testo all’interno della tabella. Quindi, quando l’utente fa clic sul pulsante Salva, controllerà tutta la casella di testo.

Provo ad usare questo jquery per questo:

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

Sto usando MVC 5, jquery-1.10.2.js, jquery-1.10.2.min.js, jquery.validate * e Site.css che hanno class input.input-validation-error

Nei miei modelli:

  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; } } 

Chiamo sopra il modello all’interno di un altro modello:

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

Di seguito è riportato il codice quando aggiungo la nuova riga:

  $("#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); } 

Per favore aiutami a risolvere il mio problema. Apprezzo davvero il tuo aiuto ragazzi. Grazie.

Non si includono gli attributi data-val necessari per le caselle di testo o gli elementi segnaposto per la visualizzazione dei messaggi di convalida, che vengono utilizzati da jquery.validate.unobtrusive.js per eseguire la convalida lato client. Inoltre, l’implementazione corrente non consente all’utente di rimuovere altro che l’ultima riga che può essere risolta includendo un input nascosto per l’indicizzatore che consente agli indici non consecutivi di essere pubblicati e associati alla propria raccolta.

Innanzitutto, aggiungi un object ClsTargetInfo predefinito alla proprietà TargetInfo e genera il suo html nella 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)

Quindi controlla l’html che genera per l’elemento

che dovrebbe apparire come qualcosa

       ....  

e copiarlo all’interno di un elemento nascosto posizionato all’esterno dei tag del modulo e sostituire tutte le istanze dell’indicizzatore con un carattere fittizio, quindi name="TargetInfo[0].TargetColor_U" diventa name="TargetInfo[#].TargetColor_U" ), e sostituisce anche l’attributo value dell’ingresso nascosto così value="0" diventa value="#"

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

Quindi la sceneggiatura sarà simile

 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); }); 

Note a margine:

  1. La validazione non invadente funziona analizzando gli attributi data-val quando il modulo viene sottoposto a rendering. Quando aggiungi contenuti dinamici, è necessario ri-analizzare il validatore come indicato nelle ultime 2 righe dello script.
  2. L’aggiunta dell’ingresso nascosto per l’indicizzatore consente di eliminare qualsiasi riga nella raccolta, pertanto la rimozione del pulsante “Elimina” non è più necessaria e offrirà all’utente un’esperienza migliore.
  3. Piuttosto che usando gli stili in linea, usa invece css, per esempio, piuttosto che

    , dovresti usare #table td { padding: 0; } #table td { padding: 0; } nel tuo file .css

  4. Pur aggiungendo le righe puramente lato client offre le migliori prestazioni, è difficile da mantenere. Se aggiungi o modifichi qualsiasi attributo di convalida sulle tue proprietà (ad esempio potresti aggiungere un attributo [StringLength] ), dovrai aggiornare l’html per adattarlo. In alternativa, puoi considerare di utilizzare l’helper BeginCollectionItem che significa che hai una vista parziale (che rappresenta una riga della tabella). Per gli articoli esistenti, si utilizza un ciclo foreach con @Html.Partial() e per le nuove righe, si usa ajax per chiamare un metodo controller che restituisce una vista parziale e aggiornare il DOM