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

发布于 2022-09-05 23:23:28 字数 114 浏览 12 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

影子是时光的心 2022-09-12 23:23:28

可以去看看官方的文档,题主的意思是验证成功后,弹出模态框是吧。只要再验证通过后回调函数中加入打开模态框代码就可以了。
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();
            弹出自己的模态框。
        });
满意归宿 2022-09-12 23:23:28

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

笑叹一世浮沉 2022-09-12 23:23:28

不太清楚您的意思,
以我的理解应该你可以看看这些方法可能符合你的要求?http://v3.bootcss.com/javascr...

人生戏 2022-09-12 23:23:28

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

<script type="text/javascript">
  function submit_form(){
    if(表单无错误){
        // 触发model
    }else{
        // 返回表单错误
    }
  }
</script>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文