首页 新闻 会员 周边 捐助

模态框,ajax, jquery

0
[已解决问题] 解决于 2017-07-12 18:25

有个问题,在界面点击一个按钮,出现一个模态框,框内有一些select和input标签,可以选择,现在有个需求,要对模态框内的form表单进行验证(比如有些是必填的,如果没有填,点击提交submit按钮,模态框内会出现错误提示),我是用jquery.validate.js插件来做验证的,但是点击提交按钮,一直没有出现错误提示,这是为什么??

问题补充:
    
<div class="modal fade bs-modal-lg" id="edit_instance" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">编辑实例信息</h4>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal" method="post" id="edit_instance_meta"> {% csrf_token %}
                    <div class="form-body" id="instance_form_group">
                        <div class="form-group">
                            <label class="col-md-2 control-label">实例角色</label>
                            <div class="col-md-4">
                                <select  class="bs-select form-control required" data-live-search="true" data-size="8" name="role" id="role_add">
                                    <option value=""  >请选择</option>
                                    {% for role_option in select_options.roles%}
                                        <option value="{{ role_option.role }}" >{{ role_option.role }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <label class="col-md-2 control-label">实例端口</label>
                            <div class="col-md-4">
                                <select class="bs-select form-control" data-live-search="true" data-size="8" name="db_port"  id="db_port_add">
                                    <option value=""  >请选择</option>
                                    {% for db_port_option in select_options.db_port%}
                                        <option value="{{ db_port_option.db_port }}"  >{{ db_port_option.db_port }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">

                <button type="button" class="btn dark btn-outline" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn green" id="instance_edit_submit">提交</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

上面的HTML,点击界面的新增按钮

调用JS, 弹出模态框

$("#edit_instance").modal('show');

 

JS验证:

// 检查验证信息
$("#edit_instance_meta").validate({

    rules:{
        role:"required"
    },
    messages:{
        role:"role必填"
    }
    /*
    // 在模态框点击提交后发起ajax请求
    submitHandler: function () {  //通过之后回调
        var submit_url = $("#edit_instance_meta").attr("action");
        jQuery.ajax({
            url: submit_url,   // 提交的页面
            data: $('#edit_instance_meta').serialize(), // 从表单中获取数据
            type: "POST",                   // 设置请求类型为"POST",默认为"GET"
            success: function(data) {
                alert("提交成功");

            }
        });
        $("#edit_instance").modal('hide');  //提交成功后隐藏模态框

    }
    */

});
前程明亮的主页 前程明亮 | 初学一级 | 园豆:130
提问于:2017-07-11 21:17
< >
分享
最佳答案
0

插件没问题,刚刚还试过了,大兄弟你贴代码    

奖励园豆:5
老年游侠 | 菜鸟二级 |园豆:364 | 2017-07-11 23:53

感谢回复,代码在公司电脑,明天我再贴一下哈。这个问题今天搞了一下午……学习效率好低

前程明亮 | 园豆:130 (初学一级) | 2017-07-11 23:59
其他回答(2)
0

为什么不贴错误提示的内容

与阳光握手言和 | 园豆:373 (菜鸟二级) | 2017-07-12 09:27
0

submit标签必须写在form表单才有用……

前程明亮 | 园豆:130 (初学一级) | 2017-07-12 18:24
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册