Установить проверку classа для динамического текстового поля в таблице

У меня есть таблица со строкой динамического текстового поля. Пример:

введите описание изображения здесь

Я добавляю строку в таблицу, нажимая [+] Добавить новую цель, появится следующее ниже:

введите описание изображения здесь

Я хочу добавить class проверки во все текстовое поле внутри таблицы. Поэтому, когда пользователь нажимает кнопку сохранения, он проверяет все текстовое поле.

Я пытаюсь использовать этот jquery для этого:

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

Я использую MVC 5, jquery-1.10.2.js, jquery-1.10.2.min.js, jquery.validate * и Site.css, которые имеют class input.input-validation-error

В моих моделях:

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

Я вызываю выше модель внутри другой модели:

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

Ниже приведен код, когда я добавляю новую строку:

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

Пожалуйста, помогите решить мою проблему. Очень ценю, что ваши ребята помогают. Спасибо.

Вы не включаете необходимые атрибуты data-val в текстовые поля или элементы-заполнители для отображения сообщений проверки, которые используются jquery.validate.unobtrusive.js для проверки на стороне клиента. Кроме того, ваша текущая реализация не позволяет пользователю удалять что-либо другое, что последняя строка, которая может быть решена, путем включения скрытого ввода для индексатора, который позволяет размещать не последовательные индексы и привязывать к вашей коллекции.

Сначала запустите, добавив один объект ClsTargetInfo умолчанию к свойству TargetInfo и сгенерируйте его html в представлении

  // 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)

Затем проверьте html, который он генерирует для элемента

который должен выглядеть примерно так:

       ....  

и скопируйте его внутри скрытого элемента, который находится за пределами тегов формы, и замените весь экземпляр индексатора фиктивным символом, поэтому name="TargetInfo[0].TargetColor_U" становится name="TargetInfo[#].TargetColor_U" ) и также замените атрибут значения скрытого ввода, поэтому value="0" становится value="#"

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

Тогда сценарий будет выглядеть так:

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

Боковые заметки:

  1. Ненавязчивая проверка выполняется путем анализа атрибутов data-val при первой визуализации формы. Когда вы добавляете динамический контент, необходимо повторно проанализировать валидатор, как указано в последних двух строках скрипта.
  2. Добавление скрытого ввода для индексатора позволяет удалить любую строку в коллекции, поэтому удаление кнопки «удалить» больше не является необходимым и даст пользователю лучший опыт.
  3. Вместо того, чтобы использовать встроенные стили, вместо этого используйте css вместо

    , вы должны использовать #table td { padding: 0; } #table td { padding: 0; } в вашем .css файле

  4. При добавлении строк чисто клиентская сторона дает лучшую производительность, ее трудно поддерживать. Если вы добавляете или изменяете какие-либо атрибуты проверки в своих свойствах (например, позже вы можете добавить [StringLength] ), вам нужно будет обновить html. В качестве альтернативы вы можете использовать помощник BeginCollectionItem, что означает, что у вас есть один частичный вид (представляющий строку таблицы). Для существующих элементов вы используете цикл foreach с @Html.Partial() и для новых строк, вы используете ajax для вызова метода controllerа, который возвращает частичное представление, и обновляет DOM
   
  • Выполнение проверки на стороне клиента для пользовательского атрибута
  • Как пропустить проверку при нажатии на определенную кнопку?
  • JSF не поддерживает проверку кросс-поля, есть ли обходной путь?
  • Фильтр аутентификации и сервлет для входа в систему
  • Как проверить, включено ли хотя бы одно из нескольких полей ввода?
  • Как работает SQL-инъекция из комикса XBCD Bobby Tables?
  • Как установить флажок в форме ASP.NET?
  • Бесконечная петля с cin при наборе строки, в то время как число ожидается
  • Проверка динамически добавленных полей
  • maxlength атрибута текстового поля из DataAnnotations StringLength в Asp.Net MVC
  • Проверка адреса электронной почты в Android на EditText
  • Давайте будем гением компьютера.