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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.