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.

Claypoole

I haven't used that myself, but I would expect you probably need to add the required attribute to your div.bfh-datepicker. – Goldia

required data-bv-notempty why are you not making it required as well? – Bili

Forgot to mention that the required attribute was tried before, no effect. Please note that the attributes are added to the <div> and not the <input> element, as input was dynamically generated by the bootstrap-form-helpers code. – Claypoole

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>

Resigned

how to set country from javascript – Biak