Проверьте входные данные, обновите атрибуты <td>, чтобы они соответствовали статусу проверки.

0

У меня есть таблица:

<div id="email-form" title="New email campaign">
  <form id="email-form">
    <label for="dialog-name"><b>Your Name</b></label>
    <input type="text" id="dialog-name">
    <label for="dialog-email"><b>Your Email</b></label>
    <input type="text" id="dialog-email"><br>

    <label for="dialog-recipients"><b>Recipients</b></label>
    <table id="dialog-recipients">
      <tr>
        <th style="font-weight:normal;text-align:left;">Name</th>
        <th style="font-weight:normal;text-align:left;">Email</th>
      </tr>
      <tr>
        <td class="control-group"><input type="text" class="dialog-recipient-name control-label"></td>
        <td class="control-group"><input type="text" class="dialog-recipient-email control-label"></td>
        <td class="remove-recipient"><i class="icon-remove"></i></td>
      </tr>
    </table>
    <table>
      <tr>
        <a href="javascript:void(0)" id="add-recipient-row" style="color:#0088cc"><small><i class="icon-plus"></i> Add one (TAB)</small></a>
      </tr>
    </table>
  </form>
</div>

Когда вы выберете последний <input> и нажмите вкладку, добавится еще один:

      function appendRow() {
        $("#dialog-recipients").append(' <tr> <td><input type="text" class="dialog-recipient-name"></td> <td><input type="text" class="dialog-recipient-email"></td> <td class="remove-recipient"><i class="icon-remove"></i></td> </tr>');
      }

      $('#dialog-recipients').on('keydown', 'input', function (e) {
          // Append onto last row with TAB
          if (e.keyCode !== 9) return;
          var lastTr = $('#dialog-recipients tr:last');
          var lastTd = $('#dialog-recipients tr:last td').eq(-2);
          if (($(e.target).closest('td')).is(lastTd)) {
              appendRow();
          }
      });  

и я хотел бы добавить класс.error к любым/всем входным тегам, которые пусты, например, для имени.dialog-recipient-name, например:

      $('#dialog-recipients').on('blur', '.dialog-recipient-name', function(e) {
        if ($(this).val() === '') {
          $(this).closest('td').addClass('error');
        } else {
          $(this).closest('td').removeClass('error');
        }
      });

Однако этот код работает только для первого input.dialog-recipient-name, и проверка не работает для каких-либо последующих входов.

Теги:
validation

1 ответ

0
Лучший ответ

Догадаться:

Последний фрагмент работает очень хорошо, но appendRow() следует изменить, чтобы включить.control-группу в <td>.

      function appendRow() {
        $("#dialog-recipients").append(' <tr> <td class="control-group"><input type="text" class="dialog-recipient-name"></td> <td>&nbsp;&nbsp;<input type="text" class="dialog-recipient-email"></td> <td class="remove-recipient" style="padding-left: 8px;padding-bottom: .5em;font-size:1.5em;"><i class="icon-remove"></i></td> </tr>');
      }

Ещё вопросы

Сообщество Overcoder
Наверх
Меню