javascript - 在输入字段输入/选择值时自动隐藏/显示元素(不使用 keyup() 或单击)

Question

我有一个 <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

Answer 1

从日期选择器中选择一个值时，您可以使用 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();
    }
});

希望这能解决您的问题。