bootstrap怎么表单验证成功后弹出modal?

张小贱
  • 14

$('form').bootstrapValidator()内容写好了,能够正常验证,Modal也加好了点击提交后也能弹出,我的问题是点击提交后如何写js先进行表单验证,然后在弹出Modal,而不是两个同时进行的?

回复
阅读 5.1k
4 个回答

可以去看看官方的文档,题主的意思是验证成功后,弹出模态框是吧。只要再验证通过后回调函数中加入打开模态框代码就可以了。
html:

<form id="defaultForm" method="post" class="form-horizontal" action="ajaxSubmit.php">
                <div class="form-group">
                    <label class="col-lg-3 control-label">Username</label>
                    <div class="col-lg-5">
                        <input type="text" class="form-control" name="username" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-3 control-label">Email address</label>
                    <div class="col-lg-5">
                        <input type="text" class="form-control" name="email" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-3 control-label">Password</label>
                    <div class="col-lg-5">
                        <input type="password" class="form-control" name="password" />
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-lg-9 col-lg-offset-3">
                        <button type="submit" class="btn btn-primary">Sign up</button>
                    </div>
                </div>
            </form>

js:

 $('#defaultForm').bootstrapValidator({
            message: 'This value is not valid',
            //live: 'submitted',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: 'The username is not valid',
                    validators: {
                        notEmpty: {
                            message: 'The username is required and can\'t be empty'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'The username must be more than 6 and less than 30 characters long'
                        },
                        /*remote: {
                            url: 'remote.php',
                            message: 'The username is not available'
                        },*/
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: 'The username can only consist of alphabetical, number, dot and underscore'
                        }
                    }
                }
            }
        })
        .on('success.form.bv', function(e) {//验证通过后会执行这个函数。
            // Prevent submit form
            e.preventDefault();
            弹出自己的模态框。
        });

如果是用js提交的话,提交按钮 type="submit" 改成 type="button" 试试

你是想先验证表单是否有错误,如果没有错误再弹出model对吧,如果是这样的话你可以将model的触发器放在表单验证之后不就可以了吗?比如:

<script type="text/javascript">
  function submit_form(){
    if(表单无错误){
        // 触发model
    }else{
        // 返回表单错误
    }
  }
</script>
宣传栏