模态框，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'); //提交成功后隐藏模态框 } */ });
最佳答案
0
插件没问题，刚刚还试过了，大兄弟你贴代码
奖励园豆：5
感谢回复，代码在公司电脑，明天我再贴一下哈。这个问题今天搞了一下午……学习效率好低
其他回答(2)
0
为什么不贴错误提示的内容
0
submit标签必须写在form表单才有用……
