courtly
courtly
courtly
courtly

Upcoming Events

London user and administrator training
February 23rd, 2012
A comprehensive two day hands on training course covering the configuration, (more...)

CiviCRM Seminar - London
February 23rd, 2012
NfP Services free seminar

NYC CiviCRM MeetUp Thursday February 23, 2012
February 23rd, 2012
Reminder NYC CiviCRM meetup 5:30-7:30 Thursday, February 23.

CiviCRM London sprint Feb 2012
February 27th, 2012
Following the CiviCRM training here in London, we will have a CiviCRM code (more...)

Austin CiviCRM Meetup March 8, 2012 6:30pm
March 8th, 2012

Philadelphia - CiviCRM Meetup for Q1 2012
March 13th, 2012

UK South West - CiviCRM Meetup
March 20th, 2012
Come meet others from the Area who are interested in, using or developing for (more...)

[Bristol, UK] user and administrator training
March 21st, 2012
A comprehensive hands on training course covering the configuration, (more...)

San Francisco user and administrator training
March 29th, 2012
A comprehensive two day hands on training course covering the configuration, (more...)

CiviCRM Usability, Test and Code Sprint - San Francisco (March 2012)
March 29th, 2012
This usability, code and test sprint is targeted at CiviCRM users and (more...)

CiviCon 2012 San Francisco Bay Area - April 2nd 2012
April 2nd, 2012
CiviCon is THE annual event bringing together the people who use, develop, (more...)

CiviCRM Documentation, Test and Code Sprint - after CiviCon San Francisco (April 2012)
April 4th, 2012
This sprint is targeted at CiviCRM users and developers who want to work on (more...)

CiviCRM Components

Tools for engaging your supporters...

CiviContribute

CiviEvent

CiviMail

CiviMember

CiviReport

How to implement client side phone validation

Not Just a Contact Database

These optional components give you more power to connect and engage your supporters.

  • civiCASE

  • Case management for clients and constituents.

  • civiEVENT

  • Online event registration and participant tracking.

  • civiMEMBER

  • Online signup and membership management.

  • civiMAIL

  • Personalized email blasts and newsletters.

  • civiREPORT

  • Report generation and template management.

November 13, 2011 - 07:40 — kurund

Recently on CiviCRM irc and forum few people asked about adding client side validation for phone field. By default CiviCRM packages validate plugin, so this can be easily implemented with minor customization. Below is the example of validating US phone number on new contact form.

 

Index: templates/CRM/Contact/Form/Edit/Phone.tpl
===================================================================
--- templates/CRM/Contact/Form/Edit/Phone.tpl   (revision 37399)
+++ templates/CRM/Contact/Form/Edit/Phone.tpl   (working copy)
@@ -39,10 +39,10 @@
     </tr>
 {/if}
 <tr id="Phone_Block_{$blockId}">
-    <td>{$form.phone.$blockId.phone.html}&nbsp;&nbsp;{ts}ext.{/ts}&nbsp;{$form.phone.$blockId.phone_ext.html|crmReplace:class:four}&nbsp;&nbsp;&nbsp;{$form.phone.$blockId.location_type_id.html}</td>
+    <td>{$form.phone.$blockId.phone.html|crmReplace:class:"phoneUS"}&nbsp;&nbsp;{ts}ext.{/ts}&nbsp;{$form.phone.$blockId.phone_ext.html|crmReplace:class:four}&nbsp;&nbsp;&nbsp;{$form.phone.$blockId.location_type_id.html}</td>
     <td colspan="2">{$form.phone.$blockId.phone_type_id.html}</td>
     <td align="center" id="Phone-Primary-html" {if $blockId eq 1}class="hiddenElement"{/if}>{$form.phone.$blockId.is_primary.1.html}</td>
     {if $blockId gt 1}
        <td><a href="#" title="{ts}Delete Phone Block{/ts}" onClick="removeBlock('Phone','{$blockId}'); return false;">{ts}delete{/ts}</a></td>
     {/if}
-</tr>
\ No newline at end of file
+</tr>
Index: packages/jquery/plugins/jquery.civicrm-validate.js
===================================================================
--- packages/jquery/plugins/jquery.civicrm-validate.js  (revision 37399)
+++ packages/jquery/plugins/jquery.civicrm-validate.js  (working copy)
@@ -5,4 +5,13 @@
  *  To define phone validation for your site:
  *  jQuery.validator.addMethod("crm_phone", function(phone_number, element) { validation logic here }
  */
-
+(function() {
+        jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
+            phone_number = phone_number.replace(/\s+/g, ""); 
+            return this.optional(element) || phone_number.length > 9 &&
+                phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
+        }, "Please specify a valid phone number");
+        jQuery.validator.addMethod("postalcode", function(postalcode, element) {
+                return this.optional(element) || postalcode.match(/(^\d{5}(-\d{4})?$)|(^[ABCEGHJKLMNPRSTVXYabceghjklmnpstvxy]{1}\d{1}[A-Za-z]{1} ?\d{1}[A-Za-z]{1}\d{1})$/);
+        }, "Please specify a valid 5 digit zip code.");
+})();
 

I have tested this on CiviCRM v3.4 ( latest ). I hope this is helpful.

 

 

 

( categories: )

Comments

November 13, 2011 - 10:09 — colemanw

What about normalization?

Having phone numbers in any random format makes deduping on phone fields difficult. I would love to see phone fields be more strict about what characters they allow (only numbers and dashes) and in what combinations (can't have two dashes in a row). This could happen on the client side for convenience, but would need to happen on the server side as well.
I haven't been able to implement this on my own site because hook_civicrm_pre and hook_civicrm_post don't get fired for phone objects. But I have heard some murmurs on the irc that others may be at work on this problem. Any news?

November 13, 2011 - 18:17 — Eileen

Hi Coleman - adding PRE &

Hi Coleman - adding PRE & POST hooks where they are missing is pretty straight forward (and safe). I expect that even though we are in feature freeze Lobo would be OK with putting these into Phone create / add as appropriate

November 15, 2011 - 18:01 — colemanw

Cool

I was actually refering to hearing murmurs that others were at work on the phone normalization problem. Any word on that front?
And thanks for the tip about the hooks.

November 15, 2011 - 20:02 — lobo

hmm, maybe validate phone numbers at front-end and use

 
mysql triggers to format the numbers before storing them in the backend. Seems to be a lot more efficient than doing them in php and something that triggers is built for :)