How to check Bootstrap DatePicker form helpers as required or not empty?

Question

I tried using the data-bv-notempty attribute without success. Sample code 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 user_name field is successfully verified using the data-bv-notempty attribute, but not the date_entry field. Any suggestion?

UPDATE

Something strange was discovered. I added the data-bv-field='date_entry' to the bfh-datepicker . Now, if a date is first selected and a check is performed, it passes the check. On the other hand, if validation is first performed, validation is not performed, and the date is entered after a failed verification, the red cross will remain and the verification still fails. Bizarre

Answer 1

There doesn't seem to be any way to specify your own attributes in input , but you should add the required attribute with Javascript after Bootstrap Form Helper builds 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>