bootstrap Modal bootstrapValidator使用

1、引用bootstrapValidator.css和bootstrapValidator.js;

下载地址:https://github.com/nghuuphuoc/bootstrapvalidator

2、在Modal的from中的字段设置name属性;

3、删除提交按钮的属性:data-dismiss="modal",这样,验证失败Modal不会关闭

4、$(function() {

     $('#appForm').bootstrapValidator({

      message: 'This value is not valid',

      feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' },

        fields:{ appName:{ message:'应用Id验证失败',

                    validators:{ notEmpty:{ message:'应用编号不能为空' }  } } } });

     }//在加载方法$(function){}中添加验证项;

5、submit方法之前:$("#appForm").submit(function(ev){ev.preventDefault();});

     原因:bootstrapValidator默认逻辑是当表单验证失败时,把按钮给变灰色。

     但是bootstrapModal中,button并不在form内部,需要上面的语句保证: form验证失败时,不执行所绑定的后续事件 

6、submit中和swal结合:

    swal({

          text: '是否确认提交保存',

          type: 'question',

          showCancelButton: true, 

          confirmButtonText: '确认',

          cancelButtonText:'取消'

     }).then(function(isConfirm) {

          if (isConfirm) {

                var bootstrapValidator = $("#appForm").data('bootstrapValidator');

                bootstrapValidator.validate(); 

                if(bootstrapValidator.isValid()){

                        //ajax提交

                }

你可能感兴趣的:(bootstrap Modal bootstrapValidator使用)