jquery – 如何验证Bootstrap Form Helpers DatePicker为必需或非空?

前端之家收集整理的这篇文章主要介绍了jquery – 如何验证Bootstrap Form Helpers DatePicker为必需或非空?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我尝试过使用data-bv-notempty属性但没有成功.代码示例如下:
  1. <form class="form-horizontal" id="form-registration" action="/submit.PHP" method="post" >
  2. <div class='form-group'>
  3. <div class='field-group'>
  4. <label for='user_name' class='col-sm-5 control-label' id='label__user_name'>Name<sup>*</sup>:</label>
  5. <div class='col-sm-7 control-data'><input type='text' name='user_name' required data-bv-notempty class='form-control' ></div>
  6. </div>
  7. </div>
  8.  
  9. <div class='form-group'>
  10. <div class='field-group'>
  11. <label for='date_entry' class='col-sm-5 control-label' id='label__date_entry'>Date<sup>*</sup>:</label>
  12. <div class='col-sm-7 control-data'>
  13. <div class='bfh-datepicker' data-name='date_entry' data-date='' data-bv-notempty data-max='today'></div>
  14. </div>
  15. </div>
  16. </div>
  17.  
  18. <div class='text-center'><button type='button' id='btn-submit' class='btn btn-sm btn-default'>Continue</button></div>
  19. </form>

第一个字段user_name通过属性data-bv-notempty成功验证,但不是date_entry字段.有什么建议吗?

UPDATE

发现一些奇怪的东西.我将data-bv-field =’date_entry’属性添加到bfh-datepicker div.现在,如果首先选择日期并执行验证,则会通过验证.另一方面,如果首先执行验证,验证失败,并且在验证失败后输入日期,则红叉将保留,验证仍然无法通过.离奇.

解决方法

它看起来没有任何方法可以在输入上指定您自己的自定义属性,但是您应该能够在Bootstrap Form Helper构造输入后使用Javascript添加所需的属性.
  1. <div class="bfh-datepicker" id="the-required-datepicker"></div>
  2.  
  3. <script src="jquery.min.js"></script>
  4. <script src="bootstrap-formhelpers.js"></script>
  5. <script>
  6. $(function() {
  7. $('#the-required-datepicker input').attr('required','required');
  8. });
  9. </script>

猜你在找的jQuery相关文章