我已经建立了一个表单,有两个输入字段类型“日期”和两个用于选择时间窗口的选择框。如果所有字段都填写正确,则应显示“继续”按钮。然而,当第二个“日期”字段填写时,此按钮已经出现。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();
});
1条答案
按热度按时间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() === null
和null !== ''
,所以你的测试总是正确的。简单的解决方法是在select中的每个.瓦尔后面添加
||""
,它可能是null(或者更改您的第一个option
,使其不被禁用)。