Jquery. validate1.9.0 front-end verification, jquery front-end Paging

Source: Internet
Author: User

Jquery. validate1.9.0 front-end verification, jquery front-end Paging

I. Use the jquery. form plug-in to submit a form using the jquery. validate plug-in

Symptom: When a form is submitted, the form is submitted as usual even if the front-end fails to pass the verification.

Solution:

 

[Php]View plaincopy
  1. $ ('# MyForm'). submit (function (){
  2. If (! $ (This). valid () return false; // Add this sentence OK
  3. ('.Error'{.html ('');
  4. $ ("# Go"). prop ("disabled", true );
  5. $ (This). ajaxSubmit ({
  6. Type: "POST ",
  7. // BeforeSubmit: showRequest,
  8. DataType: 'json ',
  9. Success: showResponse
  10. });
  11. Return false;
  12. });

Instructions:

 

Custom submission method (ajax submission)
If ajax is used for submission, use the following two methods in combination with the verification framework:
1) Configure ajax submission using the submitHandler attribute. submithandler: When all the forms are verified, the configuration code will be called back. In this case, ajax is called for submission after the verification is passed.
2) use the valid method to listen to the form submit event and submit it again when $ ('# form'). valid () returns true.

You can use ajax to submit a form by listening to the form submit event. The complete sample code is as follows:

 

[Php]View plaincopy
  1. $ (Document). ready (function (){
  2. $ ('# MyForm'). submit (function (){
  3. If (! $ (This). valid () return false;
  4. ('.Error'{.html ('');
  5. $ ("# Go"). prop ("disabled", true );
  6. $ (This). ajaxSubmit ({
  7. Type: "POST ",
  8. // BeforeSubmit: showRequest,
  9. DataType: 'json ',
  10. Success: showResponse
  11. });
  12. Return false;
  13. });
  14. Var validator = $ ("# myForm"). validate ({
  15. Rules :{
  16. Username: "required ",
  17. Email :{
  18. Required: true,
  19. Email: true
  20. }
  21. },
  22. Messages :{
  23. Username: "enter your name ",
  24. Email :{
  25. Required: "Enter the Email address ",
  26. Email: "enter the correct email address"
  27. }
  28. }
  29. });
  30. });
  31. Function showResponse (jsonData, statusText)
  32. {
  33. If (statusText = 'success ')
  34. {
  35. $ ("# Go"). prop ("disabled", false );
  36. If (jsonData. status = 1)
  37. {
  38. $ ("# Return" response .html (jsonData. message );
  39. }
  40. Else
  41. {
  42. $. Each (jsonData. errors, function (k, v ){
  43. // $ ('# Output'). find ('ul'). append ('<li>' + v + '</li> ');
  44. $ ('. E _' + k).html (v );
  45. });
  46. }
  47. }
  48. }
Ii. Methods for controlling the location of error messages

Symptom 1:

I added a new verification code to the Registry ticket. When the verification result is incorrect, the error message goes to the front of the verification code. As shown in:

Purpose: To keep the error message behind the verification code

Symptom 2:

In red, I want to move to the end of (* required.

The above two phenomena can be used to control the location of error messages through the method 'errorplacement 'provided by jquery. validate, which is also convenient to use:

 

[Php]View plaincopy
  1. ErrorPlacement: function (error, element)
  2. {
  3. Error. appendTo (element. parent ());
  4. }



 


Jqueryvalidatejs verification. What should I do when I go to the database verification email address?

This jquery. validate. js can only be used for foreground verification, that is, to verify whether the input meets the requirements.

In jquery validate, remote verification is returned in the background correctly, but the foreground does not respond.

Press ctrl + shift + j in chrome to open the console and check for JS errors.
I can say exactly that your ajax failed.
 

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.