表单字段验证的jQuery问题

bybem2ql  于 2023-04-05  发布在  jQuery
关注(0)|答案(1)|浏览(140)

我已经建立了一个表单,有两个输入字段类型“日期”和两个用于选择时间窗口的选择框。如果所有字段都填写正确,则应显示“继续”按钮。然而,当第二个“日期”字段填写时,此按钮已经出现。ID等都是正确的。有什么想法吗?
首先,这里是结构:

<div class="terminauswahl reiter reiter2">
    <div class="formgrid">
      <div>
        <label>Datum<span>*</span></label>
        <input type="date" id="datum" name="datum">
        <span class="errormsg"></span> </div>
      <div>
        <label>Abgabezeit<span>*</span></label>
        <select id="zeit" name="zeit"/>
          <option value="" selected disabled>Bitte wählen</option>
          <option value="08:00 - 08:30">08:00 - 08:30</option>
          <option value="09:00 - 09:30">09:00 - 09:30</option>
          <option value="10:00 - 10:30">10:00 - 10:30</option>
          <option value="11:00 - 11:30">11:00 - 11:30</option>
          <option value="12:00 - 12:30">12:00 - 12:30</option>
          <option value="13:00 - 13:30">13:00 - 13:30</option>
          <option value="14:00 - 14:30">14:00 - 14:30</option>
          <option value="15:00 - 15:30">15:00 - 15:30</option>
          <option value="16:00 - 16:30">16:00 - 16:30</option>
          <option value="17:00 -17:30">17:00 -17:30</option>
        </select>
      </div>
    </div>
    <br>
    <br>
    <div class="formgrid">
      <div>
        <label>Alternatives Datum<span>*</span></label>
        <input type="date" id="altDatum" name="altDatum">
        <span class="errormsg"></span> </div>
      <div>
        <label>Alternative Abgabezeit<span>*</span></label>
        <select id="altZeit" name="altZeit">
          <option value="" selected disabled>Bitte wählen</option>
          <option value="08:00 - 08:30">08:00 - 08:30</option>
          <option value="09:00 - 09:30">09:00 - 09:30</option>
          <option value="10:00 - 10:30">10:00 - 10:30</option>
          <option value="11:00 - 11:30">11:00 - 11:30</option>
          <option value="12:00 - 12:30">12:00 - 12:30</option>
          <option value="13:00 - 13:30">13:00 - 13:30</option>
          <option value="14:00 - 14:30">14:00 - 14:30</option>
          <option value="15:00 - 15:30">15:00 - 15:30</option>
          <option value="16:00 - 16:30">16:00 - 16:30</option>
          <option value="17:00 -17:30">17:00 -17:30</option>
        </select>
      </div>
    </div>
  </div>

下面是jQuery的检查:

if ($('#datum').val() !== '' 
    && $('#zeit').val() !== '' 
    && $('#altDatum').val() !== '' 
    && $('#altZeit').val() !== '') {
  $('.tc2-grid').children('.btn-next').show();
  $('.tc2-grid').addClass('tc-grid-active');
} else {
  $('.tc2-grid').children('.btn-next').hide();
  $('.tc2-grid').removeClass('tc-grid-active');
}

}
$('#datum, #zeit, #altDatum, #altZeit').on('change', function() {
  checkFormCompletion();
});
cbeh67ev

cbeh67ev1#

你的下拉唐斯永远不会是===''
您使用的是严格比较!==-但您的.val()不是'',而是null。一些简单的调试将显示实际值:
console.log($('# datum').瓦尔())console.log($('# zeit').val())console.log($('# altDatum').val())console.log($('# altZeit').val())

console.log($('# datum').瓦尔()==='')console.log($('# zeit').val()==='')console.log($('# altDatum').val()==='')console.log($('# altZeit').val()==='')
$("#zeit").val() === nullnull !== '',所以你的测试总是正确的。
简单的解决方法是在select中的每个.瓦尔后面添加||"",它可能是null(或者更改您的第一个option,使其不被禁用)。

function checkFormCompletion() {

  //console.log($('#datum').val())
  //console.log($('#zeit').val())
  //console.log($('#altDatum').val())
  //console.log($('#altZeit').val())

  if ($('#datum').val() !== '' &&
    ($('#zeit').val() || '') !== '' &&
    $('#altDatum').val() !== '' &&
    ($('#altZeit').val() || '') !== '') {
    $('.tc2-grid').children('.btn-next').show();
    $('.tc2-grid').addClass('tc-grid-active');
  } else {
    $('.tc2-grid').children('.btn-next').hide();
    $('.tc2-grid').removeClass('tc-grid-active');
  }

}

$('#datum, #zeit, #altDatum, #altZeit').on('change', function() {
  checkFormCompletion();
});

 $('.tc2-grid').children('.btn-next').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="terminauswahl reiter reiter2">
  <div class="formgrid">
    <div>
      <label>Datum<span>*</span></label>
      <input type="date" id="datum" name="datum">
      <span class="errormsg"></span> </div>
    <div>
      <label>Abgabezeit<span>*</span></label>
      <select id="zeit" name="zeit">
        <option value="" selected disabled>Bitte wählen</option>
        <option value="08:00 - 08:30">08:00 - 08:30</option>
        <option value="09:00 - 09:30">09:00 - 09:30</option>
        <option value="10:00 - 10:30">10:00 - 10:30</option>
        <option value="11:00 - 11:30">11:00 - 11:30</option>
        <option value="12:00 - 12:30">12:00 - 12:30</option>
        <option value="13:00 - 13:30">13:00 - 13:30</option>
        <option value="14:00 - 14:30">14:00 - 14:30</option>
        <option value="15:00 - 15:30">15:00 - 15:30</option>
        <option value="16:00 - 16:30">16:00 - 16:30</option>
        <option value="17:00 -17:30">17:00 -17:30</option>
      </select>
    </div>
  </div>
  <br>
  <br>
  <div class="formgrid">
    <div>
      <label>Alternatives Datum<span>*</span></label>
      <input type="date" id="altDatum" name="altDatum">
      <span class="errormsg"></span> </div>
    <div>
      <label>Alternative Abgabezeit<span>*</span></label>
      <select id="altZeit" name="altZeit">
        <option value="" selected disabled>Bitte wählen</option>
        <option value="08:00 - 08:30">08:00 - 08:30</option>
        <option value="09:00 - 09:30">09:00 - 09:30</option>
        <option value="10:00 - 10:30">10:00 - 10:30</option>
        <option value="11:00 - 11:30">11:00 - 11:30</option>
        <option value="12:00 - 12:30">12:00 - 12:30</option>
        <option value="13:00 - 13:30">13:00 - 13:30</option>
        <option value="14:00 - 14:30">14:00 - 14:30</option>
        <option value="15:00 - 15:30">15:00 - 15:30</option>
        <option value="16:00 - 16:30">16:00 - 16:30</option>
        <option value="17:00 -17:30">17:00 -17:30</option>
      </select>
    </div>
  </div>

  <div class='tc2-grid'>
    <div class='btn-next'>
      continue
    </div>
  </div>

相关问题