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(); 的話會不經過驗證直接提交，