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

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]);
        }
      });
    }
  });

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

相关推荐