jquery Validate and jquery form plug-in combination implementation validate form after Ajax commits _jquery

To implement form validation and no refresh submission form We can use the two very useful plug-ins of jquery--jquery validate.js and jquery form.js. Details are given below.

1, JQuery validate.js, it plainly is a very noble people for us to write a variety of forms of verification, we do not have these children's shoes to write, day by day, how tired ah, hehe.

2, JQuery form.js, "This plugin allows you to simply upgrade HTML-submitted forms to a form submitted using AJAX technology." The main method in the plugin, Ajaxform and Ajaxsubmit, is the ability to gather information from the form component to determine how to process the submission of the form. Two methods support a wide range of optional parameters, allowing you to fully control the submission of the data in the form. This makes the process of submitting a form in an AJAX way simply can't be simpler! ”。

See the code example below:

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>//dropdown list Empty Verify that the value of the
 item is null
 </div> 
 < Input type= "Submit" class= "btn btn-primary" value= "new column"/> <input "
 reset" type= "class= btn" Value= "Empty"/>
</form>

Javascript:

$ (document). Ready (function () {
 $ ("#AddColumnsForm"). Validate ({
 submithandler:function (form) {
  $ (form) ). Ajaxsubmit ();}});

Step back, please.

$ (document). Ready (function () {
 $ ("#AddColumnsForm"). Validate ({
 submithandler:function (form) {
  $ ( form). Ajaxsubmit ({
  success:function (Result) {//) the data displayed by the Update page after the form is submitted
   $ (' #TreeTable '). Treegrid (' reload ');
   var d = result.split (';');
   ShowMsg (D[0], d[1], d[2]);}});

And then under the modified error message display position, conforms to the bootstrap style

$ (document). Ready (function () {
 $ ("#AddColumnsForm"). Validate ({
 errorplacement:function (error, Element) {//Custom error message display operation, element is an error input control, error can be considered to be included

Label label for error message

  Element.next (' Span.help-block '). Remove ();
  Element.after (' <span class= ' help-block ' > ' + error.text () + ' </span> ');
  Element.parent (). addclass ("Has-error");
 },submithandler:function (form) {
  $ (form). Ajaxsubmit ({
  Success:function (Result) {
   $ (' #TreeTable '). Treegrid (' reload ');
   var d = result.split (';');
   ShowMsg (D[0], d[1], d[2]);}});
 

The above content introduces the Jquery.validate and the Jquery.form plug-in combination realization verification form after the AJAX submission, this article writes the bad also please forgive me, thanks.