Jquery.validate combined with Poshytip for perfect verification of forms

1. js that needs to be referenced

2. <script src="/themes/default/lib/jquery/jquery-1.7.1.min.js" type="Text/javascript" ></script >

4. <!--Bubbles Tips-
   <script src= "/themes/default/lib/poshytip/jquery.poshytip.min.js" type= "Text/javascript" ></script>
   <link href= "/themes/default/lib/poshytip/tip-yellow/tip-yellow.css" rel= "stylesheet"
   Type= "Text/css"/>

6. <!--public functions--
8. <script src="/themes/default/lib/function.js" type="Text/javascript" ></script>
10. function.js Code:
14. //============================================
16. formtip===================================
18. (function ($) {
20. $.fn.formtip = function (message, second, option) {
22. if (second = = undefined)
24. second = 3;
26. $ (". Tip-yellow"). Remove ();
28. try {
30. $ (this). Poshytip ({className: ' Tip-yellow ', content:message, Timeonscreen:second *, Showon: ' None ', Alignto: ' t  Arget ', Alignx: ' Inner-left ', offsetx:0, Offsety:5}). Poshytip ("show");
32. $ (this). focus (); //Note that to combine jquery.validate must be placed in the back
34. } catch (e) {
36. $ (this). blur (function () {
38. alert (message);
40. });
44. }
46. }
48. }) (JQuery);
50. //====================================
56. <!--form validation, you need to add class="required" to the field
58. <script src="/themes/default/lib/validate/jquery.validate.min.js" type="Text/javascript" ></ Script>
60. <script src="/themes/default/lib/validate/messages_cn.js" type="Text/javascript" ></script>
62. <script src="/themes/default/lib/validate/jquery.validate.extend.js" type="Text/javascript" ></ Script>

2. Page usage

2. //form validation
4. $ ("#form_customer"). Validate ({
6. Rules: {
8. Cus_name: {
10. Rangelength: [2, 20]
12. },
14. Cus_tel: {
16. Remote: {
18. URL: '/apps/crm/loaddata/validatephone/'
20. //, data: {
22. //Action:function () {return "Validate_phone";}
24. //                    }  
26. },
28. Con_name: {
30. Rangelength: [2, 20]
32. }
34. }
36. },
38. Messages: {
40. Cus_name: {
42. Required: "Customer name cannot be empty!" ",  
44. Rangelength: "Customer name length must be between 2-20"
46. },
48. Cus_tel: {
50. Remote: "The phone or mobile number already exists!" " 
52. },
54. Con_name: {
56. Required: "The primary contact name cannot be empty!" ",  
58. Rangelength: "Primary Contact name length must be between 2-20"
60. }
62. },
64. Success:function (Element) {
66. var elem = $ (element);
68. Elem.poshytip (' Disable ');
70. Elem.poshytip (' Destroy ');
72. //        },
74. Errorplacement: function (Error, Element) {
76. var errormsg = error[0].innerhtml;
78. var elementname = element[0].name;
80. $ ("#" + elementname). Formtip (ERRORMSG);
82. }
84. });

3. Demo

If you have any questions, can give me a message , I will take time to answer.

I Weibo: @LeaveBugsAway welcome nagging.

Jquery.validate combined with Poshytip for perfect verification of forms