弹出框页面中使用jquery.validate验证控件有几个问题需要解决:

1,弹出框的提交事件完成后如何关闭弹出框页面?

2,提交不成功如何返回当前页?

3,如果知道验证事件成功?

之前笔者都是JS验证控件,放着强大的jquery.validate控件不用,自己写验证,会是让追求程序完美的人心里有种淡淡的忧伤。

不过还好,今天下午笔者花了点时间,已实现这种功能,虽然也不是很完美,但也基本能用了。

先看下效果,一会再上代码。

当验证通过后,程序后台开始提交,提交成功,当前弹出框关闭。

为此代码如下。

1,打开弹出框。

        function AnswerDialog(id) {
$.dialog({
width: '450px',
height: '500px',
lock: true,
title: '回复提问',
content: 'url:/VideoManage/QuestionEdit/' + id
});
}

2,在弹出框中定义关闭事件。

        var api = frameElement.api, W = api.opener;
var data = api.data;

3,验证成功开始执行自定义代码。

        $(document).ready(function () {
$("#formLogin").validate({
event: "keyup",
success: function () {ok },
rules: {
VideoTitle: { required: true },
Answer: { required: true }
},
messages: {
VideoTitle: { required: '不能为空!' },
Answer: { required: '不能为空!' }
}
});
});

4,在ok方法中提交数据库,如果返回结果正确,关闭当前弹出框。

        function ok() {
var questionId = $('#QuestionId').val();
var answer = $('#Answer').val();
var isPublic = $('input:radio[name="IsPublic"]:checked').val(); $.post("/VideoManage/QuestionEditPost", { questionId: questionId, answer: answer, isPublic: isPublic }, function (txt) {
if (txt == "OK") {
api.close();
}
}, "text"); }

5,如果返回结果不正确,页面不会关闭,这时执行后台传过来的页面提示框,并跳转。

return Content("<script>alert('新增失败,请稍后重试!');window.history.go(-1);</script>", "text/html");

至此,大功搞成,各位园友,有更好办法,欢迎交流。

弹出框页面中使用jquery.validate验证控件的更多相关文章

  1. Vue父组件如何调用子组件(弹出框)中的方法的问题

    如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的 ...

  2. 使用Uploadify 时,同时使用了jQuery.Validition 验证控件时,在IE11上出现JS缺少对象错误。

    场景: 使用jQuery.1.8.2 使用 Uploadify 3.2上传控件 使用jQuery.Validition 1.9 验证 使用IE 11 时,当鼠标点击上传按钮时,会出现JS 缺少对象错误 ...

  3. WEB页面中常见的四种控件的必须的测试

    以下为常规的需求,除非需求有明确说明,如密码输入框中可以输入空格.   输入框 1. 为空,但页面中明确说明不能为空(带有星号或者只有这一个输入框),有以下两种情况: a. 不进行输入或者使其为空:焦 ...

  4. Jquery Validation 验证控件的使用说明

    转载自:http://blog.csdn.net/huang100qi/article/details/52453970,做了一些简化及修改 下载地址:https://jqueryvalidation ...

  5. ASP.NET c# textbox 正则表达式 文本框只允许输入数字(验证控件RegularExpressionValidator )

    <input type="text" name="test" onKeyUp="test1.value=(this.value=this.val ...

  6. css超简单实现div页面居中【适合做弹出框】

    1.前言 现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...

  7. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

  8. 使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题

    问题呈现:弹出框页面 <tr class="addtr"> <th>内容</th> <td> <!-- <textare ...

  9. 关于Layer弹出框初探

    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...

随机推荐

  1. Hibernate一对一双向关联映射

    关键原因在于对象模型具有方向性: 单向:一端只能加载另一端,不能反过来. 双向:两端都可以加载另一端. 问题来了:如何我们想从身份证端(IdCard)加载人(Person),怎么办呢? 下面我们开始介 ...

  2. 宝马-中国官方网站服务站点信息爬去记录(解析json中数据)

    具体步骤: 1.进入宝马官网,查找经销商查询界面 http://www.bmw.com.cn/cn/zh/general/dealer_locator/content/dealer_locator.h ...

  3. bootstrap IE兼容

    <meta name="viewport" content="width=device-width, initial-scale=1">     & ...

  4. 10张思维导图带你学习JavaScript

    学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将po出10张JavaScript相关的思维导图. 思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却 ...

  5. ActiveMQ中Session设置的相关理解

    名词解释: P:生产者 C:消费者 服务端:P 或者 ActiveMQ服务 客户端:ActiveMQ服务 或者 C 客户端成功接收一条消息的标志是这条消息被签收.成功接收一条消息一般包括如下三个阶段: ...

  6. ASP.NET中POST数据并跳转页面

    需求:先Post提交数据,然后跳转到目标页面 找了好久才发现这个神奇的类HttpHelper.原理很简单,利用html的from表单拼接,然后执行 使用方法: NameValueCollection ...

  7. easy ui 异步上传文件,跨域

    easy ui 跨域上传文件,代码如下: 1.html代码:(这段代码是个win窗体,我在点击上传图片按钮然后弹出一个上传图片的窗体,选择图片再进行上传,这样在form提交时,提交的参数会少一点.) ...

  8. netty sample

    http://netty.io/wiki/ https://github.com/netty/netty/tree/master/example/src/main/java/io/netty/exam ...

  9. speed up your sharepoint

    1. warm up http://blog.nowan.hu/post/SPWakeUp-Wake-up-your-SharePoint-quickly http://blogs.msdn.com/ ...

  10. 使用Sqlserver事务发布实现数据同步

    事务的功能在sqlserver中由来已久,因为最近在做一个数据同步方案,所以有机会再次研究一下它以及快照等,发现还是有很多不错的功能和改进 的.这里以sqlserver2008的事务发布功能为例,对发 ...