1. js that needs to be referenced
- <script src="/themes/default/lib/jquery/jquery-1.7.1.min.js" type="Text/javascript" ></script >
<!--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"/>
- <!--public functions--
- <script src="/themes/default/lib/function.js" type="Text/javascript" ></script>
- function.js Code:
- //============================================
- formtip===================================
- (function ($) {
- $.fn.formtip = function (message, second, option) {
- if (second = = undefined)
- second = 3;
- $ (". Tip-yellow"). Remove ();
- try {
- $ (this). Poshytip ({className: ' Tip-yellow ', content:message, Timeonscreen:second *, Showon: ' None ', Alignto: ' t Arget ', Alignx: ' Inner-left ', offsetx:0, Offsety:5}). Poshytip ("show");
- $ (this). focus (); //Note that to combine jquery.validate must be placed in the back
- } catch (e) {
- $ (this). blur (function () {
- alert (message);
- });
- }
- }
- }) (JQuery);
- //====================================
- <!--form validation, you need to add class="required" to the field
- <script src="/themes/default/lib/validate/jquery.validate.min.js" type="Text/javascript" ></ Script>
- <script src="/themes/default/lib/validate/messages_cn.js" type="Text/javascript" ></script>
- <script src="/themes/default/lib/validate/jquery.validate.extend.js" type="Text/javascript" ></ Script>
2. Page usage
- //form validation
- $ ("#form_customer"). Validate ({
- Rules: {
- Cus_name: {
- Rangelength: [2, 20]
- },
- Cus_tel: {
- Remote: {
- URL: '/apps/crm/loaddata/validatephone/'
- //, data: {
- //Action:function () {return "Validate_phone";}
- // }
- },
- Con_name: {
- Rangelength: [2, 20]
- }
- }
- },
- Messages: {
- Cus_name: {
- Required: "Customer name cannot be empty!" ",
- Rangelength: "Customer name length must be between 2-20"
- },
- Cus_tel: {
- Remote: "The phone or mobile number already exists!" "
- },
- Con_name: {
- Required: "The primary contact name cannot be empty!" ",
- Rangelength: "Primary Contact name length must be between 2-20"
- }
- },
- Success:function (Element) {
- var elem = $ (element);
- Elem.poshytip (' Disable ');
- Elem.poshytip (' Destroy ');
- // },
- Errorplacement: function (Error, Element) {
- var errormsg = error[0].innerhtml;
- var elementname = element[0].name;
- $ ("#" + elementname). Formtip (ERRORMSG);
- }
- });
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