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

表单:

<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. Day 1: ASP.NET and JavaScript Jan.16th Trying

    ASP.NET has its own named controls(tags) corresponding to that in an HTML document, such as <asp: ...

  2. indexOf()定义和用法

    indexOf()定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 语法 stringObject.indexOf(searchvalue,fromindex) ...

  3. AFN 二次封装

    #import "YQDataManager.h" #import <YYModel/YYModel.h> #pragma mark - 数据model基类 @impl ...

  4. 百度前端代码规范:HTML

    HTML 1.代码风格 1.1缩进与换行 [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符. <style> ul { padding:; } < ...

  5. MyCat配置详解

    MyCAT 配置解析 server.xml Mycat的配置文件,设置账号.参数等schema.xml Mycat对应的物理数据库和数据库表的配置rule.xml Mycat分片(分库分表)规则 一 ...

  6. Android related

    The build env. ensure that your computer’s BIOS is set up to support Intel’s virtualization extensio ...

  7. javascript将浮点数转换成整数

    Summary 临时我就想到3个方法而已.假设读者想到其它好用方法,也能够交流一下 parseInt 位运算符 Math.floor Math.ceil Description 一.parseInt ...

  8. ILBC 运行时 (ILBC Runtime) 架构

    本文是 VMBC / D# 项目 的 系列文章, 有关 VMBC / D# , 见 <我发起并创立了一个 VMBC 的 子项目 D#>(以下简称 <D#>)  https:// ...

  9. 比较安全的cookie验证登录设计方案

    web是基于HTTP协议传输的,明文传输是极其危险的,随便哪个抓包工具分析下数据包,就over啦,一个加密的传输过程应该包括两部分,一部分为身份认证,用户鉴别这个用户的真伪:另外一部分为数据加密,用于 ...

  10. django模板语言循环字典,及forloop

    views: from django.shortcuts import render,redirect from django.shortcuts import HttpResponse # Crea ...