Jquery. validate and jquery. form are used together to implement AJAX submission after verification form, jqueryvalidateajax

Jquery. validate and jquery. form are used together to implement AJAX submission after verification form, jqueryvalidateajax

The basic code is actually very simple, and then it will be expanded at 1.1 points. The final code is written at the end.

Form:

<Form action = "@ Url. action ("AddColumns", "Content ") "method =" post "id =" AddColumnsForm "> <div class =" form-group js-EditCol "id =" AddName "> <label class =" control-label "> name </label> <input Name = "name" class = "form-control" required/> </div> <div class = "form-group js-EditCol" id = "AddRemark"> <label class = "control-label"> remarks </label> <input name = "Remark" class = "form-control"/> </div> <div class = "form-group js-EditCol" id = "AddColumnTypeId"> <label class = "control-label"> type </label> <select class = "form-control "name =" ColumnTypeId "id =" AddColumnTypeIdSel "required> </select> // if the Value of the project is null for empty verification in the drop-down list, it is considered null. </div> <input type = "submit" class = "btn-primary" value = "add topic"/> <input type = "reset" class = "btn-default" value = "clear"/> </form>

Javascript:

$(document).ready(function () {  $("#AddColumnsForm").validate({    submitHandler: function(form) {      $(form).ajaxSubmit();    }  });});

 

Later, I used easyui to refresh the data displayed on the page.

$ (Document ). ready (function () {$ ("# AddColumnsForm "). validate ({submitHandler: function (form) {$ (form ). ajaxSubmit ({success: function (result) {// update the data displayed on the page after the form is submitted $ ('# treetable '). treegrid ('reload'); var d = result. split (';'); ShowMsg (d [0], d [1], d [2]) ;}}) ;});

 

Then, modify the display location of the error message to conform to the bootstrap style.

$ (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) {// Add it. If this code is not added, the error message is not canceled after verification }, submitHandler: function (form) {$ (form ). ajaxSubmit ({success: function (result) {$ ('# TreeTable '). treegrid ('reload'); var d = result. split (';'); ShowMsg (d [0], d [1], d [2]) ;}});

Then add the validation style of 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]);        }      });    }  });

 

Then there is the error message text.

$ (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: "The column Name is required. ", ColumnTypeId:" select the column type. ", UpColumnId:" columns at the upper level must be selected "}, submitHandler: function (form) {$ (form ). ajaxSubmit ({success: function (result) {$ ('# TreeTable '). treegrid ('reload'); var d = result. split (';'); ShowMsg (d [0], d [1], d [2]) ;}});

 

In the end

$ (Document ). ready (function () {$ ("# AddColumnsForm "). validate ({errorPlacement: function (error, element) {// an error message is displayed after an error occurs. The bootstrap auxiliary text error is the lable that displays the error information by default, and the element is the error text box element. next ('span. help-Block '). remove (); element. after ('<span class = "help-block">' + error. text () + '</span>');}, success: function (label) {// although there is no operation in it, however, if this line of code is not added, the text will not disappear after the verification is successful. }, Highlight: function (element, errorClass, validClass) {// adds the bootstrap verification failure style after the verification fails. $ (Element ). parent (). addClass ('has-error');}, unhighlight: function (element, errorClass, validClass) {// remove the bootstrap verification failure style after verification fails. $ (Element). parent (). removeClass ('has-error') ;}, messages: {// custom error message text Name: "A column Name is required. ", ColumnTypeId:" select the column type. ", UpColumnId:" columns at the upper level must be selected "}, submitHandler: function (form) {$ (form ). ajaxSubmit ({// code success: function (result) {$ ('# treetable') in the pop-up prompt box after the form is submitted successfully '). treegrid ('reload'); var d = result. split (';'); ShowMsg (d [0], d [1], d [2]) ;}});