How to validate Bootstrap Form Helpers DatePicker as Required or Not Empty?

Question

I have tried using the data-bv-notempty attribute without success. Code sample below:

<form class="form-horizontal" id="form-registration" action="/submit.php" method="post" >
  <div class='form-group'>
  <div class='field-group'>
    <label for='user_name' class='col-sm-5 control-label' id='label__user_name'>Name<sup>*</sup>:</label>
    <div class='col-sm-7 control-data'><input type='text' name='user_name' required data-bv-notempty  class='form-control' ></div>
  </div>
  </div>

  <div class='form-group'>
  <div class='field-group'>
    <label for='date_entry' class='col-sm-5 control-label' id='label__date_entry'>Date<sup>*</sup>:</label>
    <div class='col-sm-7 control-data'>
    <div class='bfh-datepicker' data-name='date_entry' data-date='' data-bv-notempty data-max='today'></div>
    </div>
  </div>
  </div>

  <div class='text-center'><button type='button' id='btn-submit' class='btn btn-sm btn-default'>Continue</button></div>
  </form>

The first field user_name is validated successfully via the attribute data-bv-notempty, but not the date_entry field. Any suggestion?

UPDATE

Discovered something strange. I added the data-bv-field='date_entry' attribute to the bfh-datepicker div. Now if a date is selected first and validation performed, it passes the validation. On the other hand if validation is performed first, fails validation, and a date is entered after the failed validation, the red cross will remain and validation still does not go through. Bizarre.

Answer 1

It doesn't look like there's any way to specify your own custom attributes on the input, but you should be able to add the required attribute with Javascript after Bootstrap Form Helper constructs the input.

<div class="bfh-datepicker" id="the-required-datepicker"></div>

<script src="jquery.min.js"></script>
<script src="bootstrap-formhelpers.js"></script>
<script>
  $(function() {
    $('#the-required-datepicker input').attr('required','required');
  });
</script>