jquery.validate和jquery.form配合实现验证表单后AJAX提交

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

表单：

<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(); 的话会不经过验证直接提交，