MVC validate.js下使用 ajaxSubmit

首页定义验证实体

using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace MvcApplication1.Models
{
    public class Student
    {
        [Display(Name = "名称")]
        [Required(AllowEmptyStrings = false, ErrorMessage = "输入名称")]
        public string Name { get; set; }

        [Display(Name = "Age")]
        [Required(AllowEmptyStrings = false, ErrorMessage = "输入年龄")]
        [Remote("CheckAge", "Home")]
        public int Age { get; set; }
    }
}

编写Controller

using MvcApplication1.Models;
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ContentResult Index(Student student)
        {
            return Content("success");
        }

        public JsonResult CheckAge(int age)
        {
            if (age < 18)
            {
                return Json(true, JsonRequestBehavior.AllowGet);
            }
            return Json("Error", JsonRequestBehavior.AllowGet);
        }
    }
}

前端

@model MvcApplication1.Models.Student

@{
    ViewBag.Title = "index";
}

<h2>index</h2>
<script src="~/script/jquery.min.js"></script>
<script src="~/script/jquery.validate.min.js"></script>
<script src="~/script/jquery.validate.unobtrusive.min.js"></script>
<script src="~/script/jquery.form.js"></script>
@using (Html.BeginForm(null, null, FormMethod.Post, new { name = "from1", id = "from1" }))
{
    @Html.TextBoxFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
    @Html.TextBoxFor(model => model.Age)
    @Html.ValidationMessageFor(model => model.Age)
    <input type="submit" value="提交" id="js_button" />
} 

采用Mvc + jquery.validate.js 验证好处:

1.快速开发

2.支持后台验证 [Remote("CheckAge", "Home")]

3.不用在脚本中写入验证规rules如:

        $("#from1").validate({
            rules: {
                Name: { required: true, maxlength: 10 },
                Age: { required: true, maxlength: 10 }
            }
        });

实现Ajax

网上查找基本上都是

   $(document).ready(function () {
        $("#from1").validate({
            submitHandler: function (form) {
                form.submit();
            }
        })
    })

但是此方法根本就不能进入,因为jquery.validate.unobtrusive.min.js已经重写了jquery.validate.min.js的validate方法

看了源码

b.valid()  b是个form 所以果断修改验证代码如下,亲测成功。

帮你们解决问题的,点个赞

作者:释迦苦僧  出处:http://www.cnblogs.com/woxpp/p/5791296.html

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

时间: 2024-10-21 12:08:37

MVC validate.js下使用 ajaxSubmit的相关文章

MVC - 11(下).jquery.tmpl.js 接收JSON类型数据循环

继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com/s/1o68w7Ke   1.前台 Index.cshtml @{ ViewBag.Title = "学员列表"; } @section headSection{ <script type="text/x-jquery-tmpl" id="trtemp

jQuery验证控件jquery.validate.js使用说明+中文API

官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载自:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 一导入js库<script src="../js/jquery.js" type="text/javascript"></script>

jQuery验证控件jquery.validate.js使用说明

官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载自:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 转载自:http://blog.csdn.net/windxxf/article/details/7520340,中文API请参考此处内容 一导入js库<script src="../

jQuery验证空间jquery.validate.js使用说明+中文API

--------转载自http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html jQuery plugin: Validation 使用说明 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 转载自:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 一.导入js库 <script src=

jQuery验证控件jquery.validate.js使用说明+中文API - Rex.He - 博客园

官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载自:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 一导入js库 <script src="../js/jquery.js" type="text/javascript"></script>

jQuery插件之验证控件jquery.validate.js

今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jörn Zaeff

jQuery验证控件jquery.validate.js的使用介绍

官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载自:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 一导入js库<script src="../js/jquery.js" type="text/javascript"></script>

jQuery验证控件jquery.validate.js使用说明+中文API (转)

官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载自:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 一导入js库 <script src="../js/jquery.js" type="text/javascript"> </script&g

Jquery.validate.js表单验证插件的使用

作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例讲解应用.it's perfect. 首先记录一些使用过程中,爱犯的错误: 1>忘记给表单form添加id属性 2>input这些表单标签必须id属性和name属性名字一样.例如:<input type="text" id="name" name=&q