Question

我有一张这样的桌子：

<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实例，并且验证似乎不适用于任何后续输入。

Answer 1

想出来：

最后一个代码段工作正常，但应修改appendRow（）以在<td>中包含.control-group。

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

验证输入，更新属性以匹配验证状态

1 个答案: