基础代码其实很简单,之后一点一点扩充。最终代码写在最后。

表单:

<form action="@Url.Action("AddColumns","Content")" method="post" id="AddColumnsForm">
<div class="form-group js-EditCol" id="AddName">
<label class="control-label">名称</label>
<input name="Name" class="form-control" required />
</div>
<div class="form-group js-EditCol" id="AddRemark">
<label class="control-label">备注</label>
<input name="Remark" class="form-control" />
</div>
<div class="form-group js-EditCol" id="AddColumnTypeId">
<label class="control-label">类型</label>
<select class="form-control" name="ColumnTypeId" id="AddColumnTypeIdSel" required>
</select>//下拉列表空置验证之要项目的Value值是空的就认为是空值
</div>
<input type="submit" class="btn btn-primary" value="新增栏目" />
<input type="reset" class="btn btn-default" value="清空" />
</form>

javascript:

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

后面再加强一下,刷新下页面显示的数据 我用的是easyui

$(document).ready(function () {
$("#AddColumnsForm").validate({
submitHandler: function(form) {
$(form).ajaxSubmit({
success: function (result) { //表单提交后更新页面显示的数据
$('#TreeTable').treegrid('reload');
var d = result.split(';');
ShowMsg(d[0], d[1], d[2]);
}
});
}
});
});

然后在修改下错误信息显示位置,符合bootstrap样式

$(document).ready(function () {
$("#AddColumnsForm").validate({
errorPlacement: function (error, element) {
element.next('span.help-block').remove();
element.after('<span class="help-block">' + error.text() + '</span>');
}, success: function (label) {
//加上就好了,不加这段代码校验成功后错误信息不取消
}, submitHandler: function (form) {
$(form).ajaxSubmit({
success: function (result) {
$('#TreeTable').treegrid('reload');
var d = result.split(';');
ShowMsg(d[0], d[1], d[2]);
}
});
}
});

之后增加bootstrap的校验样式

$(document).ready(function () {
$("#AddColumnsForm").validate({
errorPlacement: function (error, element) {
element.next('span.help-block').remove();
element.after('<span class="help-block">' + error.text() + '</span>');
}, success: function (label) {
}, highlight: function (element, errorClass, validClass) {
$(element).parent().addClass('has-error');
}, unhighlight: function (element, errorClass, validClass) {
$(element).parent().removeClass('has-error');
}, submitHandler: function (form) {
$(form).ajaxSubmit({
success: function (result) {
$('#TreeTable').treegrid('reload');
var d = result.split(';');
ShowMsg(d[0], d[1], d[2]);
}
});
}
});

然后还有错误信息提示文字。

$(document).ready(function () {
$("#AddColumnsForm").validate({
errorPlacement: function (error, element) {
element.next('span.help-block').remove();
element.after('<span class="help-block">' + error.text() + '</span>');
}, success: function (label) {
}, highlight: function (element, errorClass, validClass) {
$(element).parent().addClass('has-error');
}, unhighlight: function (element, errorClass, validClass) {
$(element).parent().removeClass('has-error');
}, messages: {
Name: "必须填写栏目名称。",
ColumnTypeId: "请选择栏目类型。",
UpColumnId: "必须选择上一级的栏目"
}, submitHandler: function (form) {
$(form).ajaxSubmit({
success: function (result) {
$('#TreeTable').treegrid('reload');
var d = result.split(';');
ShowMsg(d[0], d[1], d[2]);
}
});
}
});

最终是这样的

$(document).ready(function () {
$("#AddColumnsForm").validate({
errorPlacement: function (error, element) {
//出错后显示错误提示,使用bootstrap辅助文本 error是默认显示错误信息的lable,element是出错的文本框
element.next('span.help-block').remove();
element.after('<span class="help-block">' + error.text() + '</span>');
}, success: function (label) {
//虽然里面没有操作,但是不加这行代码校验成功后错误提示文字不消失。
}, highlight: function (element, errorClass, validClass) {
//校验失败后增加bootstrap校验失败样式。
$(element).parent().addClass('has-error');
}, unhighlight: function (element, errorClass, validClass) {
//校验失败后去掉bootstrap校验失败样式。
$(element).parent().removeClass('has-error');
}, messages: {
//自定义错误提示文本
Name: "必须填写栏目名称。",
ColumnTypeId: "请选择栏目类型。",
UpColumnId: "必须选择上一级的栏目"
}, submitHandler: function (form) {
$(form).ajaxSubmit({
//表单提交成功后更新页面内容并弹出提示框的代码
success: function (result) {
$('#TreeTable').treegrid('reload');
var d = result.split(';');
ShowMsg(d[0], d[1], d[2]);
}
});
}
});

UPDATE in 2015年9月1日

后来我又改成这样的了,不是一个表单了,但是都差不多。

直接在上边设置表单验证默认值,这样有多个表单的时候不需要重新写了。

我把验证规则写到javascript里了,因为我发现直接把验证规则像一开始那样直接写到标签里有些不支持,比如number,不知道怎么回事,可能我的写法本身就不对吧,因为我在网上没查到过和我写的一样的,是MVC自带验证生成的方式,虽然MVC使用的也是jquery.validate进行表单验证,但是一个页面多个表单MVC自带的验证就不好用了。

jQuery.validator.setDefaults({
errorPlacement: function (error, element) {
element.next('span.help-block').remove();
element.after('<span class="help-block">' + error.text() + '</span>');
}, success: function (label) {
}, highlight: function (element, errorClass, validClass) {
$(element).parent().addClass('has-error');
}, unhighlight: function (element, errorClass, validClass) {
$(element).parent().removeClass('has-error');
}
});
$("#editDatafm").validate({
rules:{
Name: {
required:true
}, Order: {
required: true,
number: true
}
},
messages: {
Name: "必须填写字典数据名称。",
Order:{
number: "排序种子必须为整数。",
required: "必须填写排序种子。"
}
}, submitHandler: function (form) {
$(form).ajaxSubmit({
success: function (result) {
$('#EditDataDlg').dialog('close');
$('#rightTable').datagrid('reload');
var d = result.split(';');
ShowMsg(d[0], d[1], d[2]);
}
});
}
});

顺便,如果是在表单之外的按钮要提交表单的话必须用 $("#editDatafm").submit(); 如果使用 document.getElementById("").submit(); 的话会不经过验证直接提交,

jquery.validate和jquery.form配合实现验证表单后AJAX提交的更多相关文章

  1. jsp验证表单后再提交

    在提交表单时,我们常常需要验证核实表单内容,若都不为空时,方能提交:若有文本框为空则不提交,并获取鼠标焦点到文本框上 ,所以我们可以利用onsubmit的方法来做,请看下面例子: <html&g ...

  2. jQuery用面向对象的思想来编写验证表单的插件

    本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下 ...

  3. jquery序列化from表单使用ajax提交返回json数据(使用struts2注解result type = json)

    1.action类引入struts2的"json-default"拦截器栈 @ParentPackage("json-default") //示例 @Paren ...

  4. Form 表单用 Ajax 提交数据并用 jQuery Validate 验证

    表单填写需要验证可用插件 jQuery Validate 提交数据使用 Ajax 可操控性得到提到 注意:请自行引入 jQuery 和 jQuery Validate HTML 代码 <form ...

  5. jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

  6. bootstrapValidator验证表单后清除当次验证的方法

    用bootstrapValidator的resetForm()方法: <!-- // create server begin --> <div class="modal f ...

  7. MVC4中 jquery validate 不用submit方式验证表单或单个元素

    正确引入MVC4 jquery验证的相关文件 <script src="/Scripts/jquery-1.4.4.js"></script> <sc ...

  8. MVC中 jquery validate 不用submit方式验证表单或单个元素

    <script src="/Scripts/jquery-1.4.4.js"></script> <script src="/Scripts ...

  9. jquery.validate校验+jquery.form提交,配合使用

    原文链接:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html 概述:本篇主要讨论jquery.validate结合jque ...

随机推荐

  1. ubuntu 安装 c语言的库函数man手册

    安装 1.C语言库函数基本的帮助文档 sudo apt-get install manpages sudo apt-get install manpages-de sudo apt-get insta ...

  2. 编写简单的windows桌面计算器程序

    编译环境:VS2017 主文件为: #include "stdafx.h" #include "WindowsProject5.h" #include &quo ...

  3. linux 极限环境下编译环境的安装

    前文:通常情况下在linux系统中安装一个软件包或者是服务有几种方式. 最简单的一种是在可以连接外网的情况下,配置好网络yum源,需要什么包就配置什么yum然后一路yum install 软件包名即可 ...

  4. 【BZOJ2555】SubString

    算是学会sam了吧…… 原题: 懒得写背景了,给你一个字符串init,要求你支持两个操作        (1):在当前字符串的后面插入一个字符串        (2):询问字符串s在当前字符串中出现了 ...

  5. java android 捕获未处理异常

    1. 定义一个异常处理类 public class ExceptionHandler implements Thread.UncaughtExceptionHandler { public Excep ...

  6. 【DB2】SQL1585N 由于没有具有兼容页面大小的可用系统临时表空间,因此无法创建临时表。SQLSTATE=54048

    自己写了一段SQL,SQL中包含ORDER BY 字句,但是在执行的时候报错如下: 经过查询发现是由于临时表空间的PAGESIZE不够大,可考虑建16k或者32k PAGESIZE的表空间 示例如下: ...

  7. jmeter 关联

    (1)正则表达式提取器 注:正则表达式部分配置说明 案例: 动态值:name=userSession value=119828.306682868zVzDzzipfcfDzQicpAVVVf> ...

  8. Dynamics CRM Plug-in

    Plug-in 就是我们俗称的dll file 或者是assembly file. 里面有自定义的代码可以运行在服务器端 Plug-in Pipeline: 只有3个阶段可以做改动: Pre-Vali ...

  9. centos7以rpm方法装mysql5.7及大坑

    环境: CentOS Linux release 7.5.1804 (Core)   Mysql版本: MySQL-5.7.17-1.el6.x86_64.rpm-bundle.tar   下载地址( ...

  10. [转]PostgreSQL命令行使用手册

    启动pgsl数据库 1 pg_ctl -D /xx/pgdata start 查看pgsl版本 1 pg_ctl --version 命令行登录数据库 1 psql -U username -d db ...