我有一个 <input>
我表单中的标记从 Bootstrap Datepicker 获取值。
<div class="wrapper">
<div class="form-group">
<label>Select Date</label>
<div class="input-group">
<input name="date_info" type="text" class="form-control datepick validate_date" placeholder="Date" readonly>
</div>
<small class="validate_date_error">This field is mandatory!</small>
<small class="validate_date_success">This is Fine!</small>
</div>
<button class="next">Next</button>
</div>
我正在尝试实现以下功能,点击 .next
按钮,如果未选择日期或日期为空,我将显示 .validate_date_error
.
如果选择了日期,没有单击或 [Enter] 键,我想显示 .validate_date_success
.
以下是我的JS
$(function() {
$('.datepick').datepicker({
autoclose: true,
format: 'dd-mm-yyyy'
});
});
$(".next").click( function() {
var check_date = $(".validate_date").val();
if( check_date === "" ){
$(this).parent().find('.validate_date_error').show();
}else {
$(this).parent().find('.validate_date_error').hide();
$(this).parent().find('.validate_date_success').show();
}
});
如果有人能帮我解决这个问题,那将会很有帮助。
我在这里更新了我的代码JS Fiddle
最佳答案
从日期选择器中选择一个值时,您可以使用 onchange 事件,
$('input[name=date]').change(function() {
var check_date = $(".validate_date").val();
$('.validate_date_error').hide();
if(check_date === ""){
$('.validate_date_success').hide();
}else{
$('.validate_date_success').show();
}
});
希望这能解决您的问题。
关于javascript - 在输入字段输入/选择值时自动隐藏/显示元素(不使用 keyup() 或单击),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49755769/