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