13Nov

how to add client side phone validation in CiviCRM

Filed in Open Source | Technology Leave a comment

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.

Originally posted on http://civicrm.org/blogs/kurund/how-implement-client-side-phone-validation

 

, , ,

31Jan

jQuery plugin to change the row color on hover

Filed in Open Source | Technology 6 Comments

For my project CivCRM, I wrote a simple jquery plugin to change the row color on mouse hover. It is generic enough and can be used in any project. Here is the implementation.

1. Create a plugin file: jquery.crmrowhighlighter.js

(function($){ $.fn.crmrowhighlighter = function(){

if ($(‘.crm-row-highlighter-processed’).length == 0){

$(‘.selector tr’).hover(function(){

$(this).addClass(‘crm-row-highlight’);

},function(){

$(this).removeClass(‘crm-row-highlight’);

});

$(‘.selector’).addClass(‘crm-row-highlighter-processed’);

};

};

})(jQuery);

2. Create css file: my.css

.crm-row-highlight {

background-color: #FFFFCC !important;

}

Usage:

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript” src=”jquery.crmrowhighlighter.js”></script>

<style type=”text/css”>@import url(“my.css”);</style>

<table class=”selector”>

<tr> Row 1: Hover to change the color</tr>

<tr> Row 2: Hover to change the color</tr>

</table>

<script type=”text/javascript”>

$( function(){

$().crmrowhighlighter( );

});

</script>

Note: You need to have table’s class = “selector”

That’s it, now when you hover the row color will change. Hope this helps.

, ,

09Sep

Easiest way to sort a select element using Jquery

Filed in Open Source | Technology Leave a comment

If you are using jquery sorting a select element is quite easy. Check the below code.

$(“#select-id”).html( $(“#select-id option”).sort(function (a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
}));

,

09Sep

How to call external site url using jQuery / AJAX

Filed in Technology Leave a comment

Recently I worked on a project where I had to pull data from an external site and populate a select on client’s website. Initially I thought it would be quite easy and straight forward. I used jQuery ajax request to fetch the data. But to my surprise I was not getting request call or any response. After struggling for atleast an hour I remembered Same origin policy

Then I figured out you can call the external url provided it gives the response in JSONP format. Below code worked for me.

$.ajax({
url: externalURL,
dataType: ‘jsonp’,
success: function(data){
// write your code here
}
});

If external site does not give JSONP response, you can call the url using iframe and then assign the response to field that you want. I have not tried this approach but it should work.

Hope this helps…

,

15Dec

iGoogle style dashboard implementation using jQuery

Filed in Open Source | Technology 2 Comments

Today I have finally finished my secret project for CiviCRM v3.1. It was to implement iGoogle style dashboard  with few features specific to our project. Main base for this feature was jquery ui’s sortable, droppable and draggable plugins.

It is always challenging and fun to work on such features. For complete  info check: http://civicrm.org/node/677

, , ,

TOP