有个问题,在界面点击一个按钮,出现一个模态框,框内有一些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'); //提交成功后隐藏模态框 } */ });
插件没问题,刚刚还试过了,大兄弟你贴代码
感谢回复,代码在公司电脑,明天我再贴一下哈。这个问题今天搞了一下午……学习效率好低
为什么不贴错误提示的内容
submit标签必须写在form表单才有用……