jquery – Fuelux向导验证输入

前端之家收集整理的这篇文章主要介绍了jquery – Fuelux向导验证输入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经将一个表单嵌套在fuelux向导中.如果用户单击下一个按钮,则不会显示bookstrap必填字段.是否有任何方法可以要求用户无法通过单击下一步进行直到输入所需的字段?

这是输入的一个例子

  1. <tr>
  2. <td>3</td>
  3. <td><label class="control-label" for="inputCompanyCountry">Country <span style="color:red">*</span></label></td>
  4. <td><div class="controls controls-extra"><input type="text" id="inputCompanyCountry" name="inputCompanyCountry" value=""required></div></td>
  5. <td><div class="help-inline">Country of residence</div></td>
  6. </tr>

用于下一个和上一个按钮的脚本

  1. $(function() {
  2. $('#MyWizard').on('change',function(e,data) {
  3. console.log('change');
  4. if(data.step===3 && data.direction==='next') {
  5. // return e.preventDefault();
  6. }
  7. });
  8.  
  9. $('#MyWizard').on('changed',data) {
  10. console.log('changed');
  11. });
  12. /*$('#MyWizard').on('finished',data) {
  13. console.log('finished');
  14. });*/
  15. $('#btnWizardPrev').on('click',function() {
  16. $('#MyWizard').wizard('prevIoUs');
  17. });
  18. $('#btnWizardNext').on('click',function() {
  19. $('#MyWizard').wizard('next','foo');
  20. });
  21.  
  22.  
  23. $('#btnWizardStep').on('click',function() {
  24. var item = $('#MyWizard').wizard('selectedItem');
  25. console.log(item.step);
  26. });
  27. });

解决方法

如果要在不发送表单的情况下进行验证,可以使用jquery.validate.使用方法$(“#form_id”).valid();,它返回true或false,具体取决于表单的状态添加类“required”到相关输入.
  1. $('#MyWizard').on('change',data) {
  2. console.log('change');
  3. if(data.step===3 && data.direction==='next') {
  4. if($("#form_id").valid()){
  5. // allow change
  6. }else{
  7. // cancel change
  8. }
  9. }
  10. });

猜你在找的jQuery相关文章