javascript - 将 ":invalid"样式应用于表单控件时出现表格列宽问题

Question

我有以下表单，我想以表格形式显示，它允许用户输入一个金额，该金额不应超过1500。当 input 字段的值发生变化时，它会检查该值并显示一条错误消息。

问题在于，当显示错误消息 时，包含input 的宽度列发生了变化(如您在代码片段中所见)。 在搜索中，我发现类 invalid-feedback 具有导致宽度变化的 display: block; 属性。但是我找不到解决这个问题的方法。如何解决这个问题？

这是我的代码

$('input').change(function() {
  if ($(this).val() > 1500) {
    $(this).removeClass('is-valid').addClass("is-invalid");
    $($(this).attr('data-msgbox')).html('Amount should not be more than Rs. 1,500');
  } else {
    $(this).removeClass('is-invalid').addClass("is-valid");
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="table-responsive">
  <table class="table table-borderless table-hover cs-table">
    <caption class="cs-content">Fee Particulars and Amount</caption>
    <thead class="cs-title">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Particulars</th>
        <th scope="col">Amount</th>
      </tr>
    </thead>
    <tbody class="cs-content">
      <tr>
        <th scope="row">1.</th>
        <td>Tution Fee</td>
        <td>
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="tution" id="tutionFee" placeholder="Tution Fee" data-input-length="3,4" data-msgbox="#tutionFeeMsg">
              <div class="invalid-feedback" id="tutionFeeMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">2.</th>
        <td>Admission/Re-admission</td>
        <td>
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="admission" id="admissionFee" placeholder="Admission/Re-admission Charge" data-input-length="3,4" data-msgbox="#admissionFeeMsg">
              <div class="invalid-feedback" id="admissionFeeMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">3.</th>
        <td>Library Charge</td>
        <td>
          <div class="form-group m-0 w-100">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="library" id="libraryFee" placeholder="Library Charge" data-input-length="2,3,4" data-msgbox="#libraryFeeMsg">
              <div class="invalid-feedback" id="libraryFeeMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">4.</th>
        <td>Examination Charge</td>
        <td>
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="examination" id="examinationFee" placeholder="Examination Fee" data-input-length="2,3,4" data-msgbox="#examinationFeeMsg">
              <div class="invalid-feedback" id="examinationFeeMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">5.</th>
        <td>Electricity Charge</td>
        <td>
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="electricity" id="electricityFee" placeholder="Electricity Charge" data-input-length="2,3,4" data-msgbox="#electricityFeeMsg">
              <div class="invalid-feedback" id="electricityFeeMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">6.</th>
        <td>Development Charge</td>
        <td>
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="development" id="development" placeholder="Development Charge" data-input-length="2,3,4" data-msgbox="#developmentMsg">
              <div class="invalid-feedback" id="developmentMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">7.</th>
        <td>Fine</td>
        <td>
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="fine" id="fine" placeholder="Fine" data-input-length="2,3,4" data-msgbox="#fineMsg">
              <div class="invalid-feedback" id="fineMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">8.</th>
        <td>Back Dues</td>
        <td>
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="dues" id="dues" placeholder="Back Dues" data-input-length="2,3,4" data-msgbox="#duesMsg">
              <div class="invalid-feedback" id="duesMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">9.</th>
        <td>Late Fine</td>
        <td>
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="late_fine" id="lateFine" placeholder="Late Fine" data-input-length="2,3,4" data-msgbox="#lateFineMsg">
              <div class="invalid-feedback" id="lateFineMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">10.</th>
        <td>Miscellaneous</td>
        <td>
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="miscellaneous" id="miscellaneous" placeholder="Miscellaneous" data-input-length="2,3,4" data-msgbox="#miscellaneousMsg">
              <div class="invalid-feedback" id="miscellaneousMsg"></div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

谢谢!!

Answer 1

为了固定包含 input 的列宽，将此 width-fixed 类分配给包含 的每个 td input 字段并添加此 CSS 规则 .width-fixed{ width:300px!important;}，您可以更改 width 值以满足您的要求

$('input').change(function() {
  if ($(this).val() > 1500) {
    $(this).removeClass('is-valid').addClass("is-invalid");
    $($(this).attr('data-msgbox')).html('Amount should not be more than Rs. 1,500');
  } else {
    $(this).removeClass('is-invalid').addClass("is-valid");
  }
});

.width-fixed{
width:300px!important;
}

@media (max-width:480px){
.width-fixed{
width:300px!important;
overflow-x: scroll!important;
}
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="table-responsive">
  <table class="table table-borderless table-hover cs-table">
    <caption class="cs-content">Fee Particulars and Amount</caption>
    <thead class="cs-title">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Particulars</th>
        <th scope="col">Amount</th>
      </tr>
    </thead>
    <tbody class="cs-content">
      <tr>
        <th scope="row">1.</th>
        <td>Tution Fee</td>
        <td class="width-fixed">
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="tution" id="tutionFee" placeholder="Tution Fee" data-input-length="3,4" data-msgbox="#tutionFeeMsg">
              <div class="invalid-feedback" id="tutionFeeMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">2.</th>
        <td>Admission/Re-admission</td>
        <td class="width-fixed">
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="admission" id="admissionFee" placeholder="Admission/Re-admission Charge" data-input-length="3,4" data-msgbox="#admissionFeeMsg">
              <div class="invalid-feedback" id="admissionFeeMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">3.</th>
        <td>Library Charge</td>
        <td class="width-fixed">
          <div class="form-group m-0 w-100">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="library" id="libraryFee" placeholder="Library Charge" data-input-length="2,3,4" data-msgbox="#libraryFeeMsg">
              <div class="invalid-feedback" id="libraryFeeMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">4.</th>
        <td>Examination Charge</td>
        <td class="width-fixed">
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="examination" id="examinationFee" placeholder="Examination Fee" data-input-length="2,3,4" data-msgbox="#examinationFeeMsg">
              <div class="invalid-feedback" id="examinationFeeMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">5.</th>
        <td>Electricity Charge</td>
        <td class="width-fixed">
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="electricity" id="electricityFee" placeholder="Electricity Charge" data-input-length="2,3,4" data-msgbox="#electricityFeeMsg">
              <div class="invalid-feedback" id="electricityFeeMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">6.</th>
        <td>Development Charge</td>
        <td class="width-fixed">
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="development" id="development" placeholder="Development Charge" data-input-length="2,3,4" data-msgbox="#developmentMsg">
              <div class="invalid-feedback" id="developmentMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">7.</th>
        <td>Fine</td>
        <td class="width-fixed">
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="fine" id="fine" placeholder="Fine" data-input-length="2,3,4" data-msgbox="#fineMsg">
              <div class="invalid-feedback" id="fineMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">8.</th>
        <td>Back Dues</td>
        <td class="width-fixed">
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="dues" id="dues" placeholder="Back Dues" data-input-length="2,3,4" data-msgbox="#duesMsg">
              <div class="invalid-feedback" id="duesMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">9.</th>
        <td>Late Fine</td>
        <td class="width-fixed">
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="late_fine" id="lateFine" placeholder="Late Fine" data-input-length="2,3,4" data-msgbox="#lateFineMsg">
              <div class="invalid-feedback" id="lateFineMsg"></div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">10.</th>
        <td>Miscellaneous</td>
        <td class="width-fixed">
          <div class="form-group m-0">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-rupee-sign"></i></div>
              </div>
              <input type="number" class="form-control" name="miscellaneous" id="miscellaneous" placeholder="Miscellaneous" data-input-length="2,3,4" data-msgbox="#miscellaneousMsg">
              <div class="invalid-feedback" id="miscellaneousMsg"></div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>