How to Enforce a Specific Phone Number Format Before Saving in Contacts Module?

👨‍💻 Development Help
1

I want to enforce a specific phone number format (e.g., (+91) 123 4567) in the Contacts module before saving. I prefer using JavaScript validation in EditView to ensure users enter the correct format.

I’d appreciate any guidance.

2

You can write a simple javascript code.

Create the file at the below location.

/custom/modules/Contacts/js/phone_format.js

1 Like
3

I have created the custom JS file at the specified location, and it is loading, but it’s not applying the expected changes.

4
5

Hello, I think you can allow users to enter a valid phone number without the country code and check if the phone is valid 10 digit value and then add the country code by auto correcting the format. You can create an entry point which will perform this validation and return the formatted value. in the javascript you just take care of highlighting the error and stop the save action. If possible I will share code after some time. Thanks

6

Please check this if it helps

  1. Create a file at custom/Extension/application/Ext/EntryPointRegistry/MyEntryPoints.php with the following code (please create the directories if not present)
<?php
$entry_point_registry['FormatPhone'] = array(
	'file' => 'custom/entrypoints/format_phone_number.php',
	'auth' => true,
);
  1. Create another file custom/entrypoints/format_phone_number.php and paste the following code in this file (create the directories if do not exist)
<?php

	if(!defined('sugarEntry') || !sugarEntry){
		
		die('Not A Valid Entry Point');
	}
		
	$phone = urldecode($_REQUEST['phone']);
	$phone = preg_replace('/[+,(,),\s]/', '', $phone);
	
	if(strlen($phone) < 10 || strlen($phone) > 10){
		echo json_encode(array('error'=>'only 10 digits are allowed in the phone value'));
	}else{
		
		$re = '/(\d{3})(\d{3})(\d{4})$/';
		$result = preg_replace($re, '(+91) $1 $2 $3', $phone);	
		
		echo json_encode(array('output'=>substr($result,0)));
	}
  1. Create a javascript code file at custom/themes/SuiteP/js/style.js and paste the following code
$(document).ready(function (){
	$('.phone').change(function(){

		
			let phoneInput = $(this);
			
			if($("#checkingDV").length){
				$("#checkingDV").remove();
			}
			
			const checkingDv = document.createElement("div");
			checkingDv.id="checkingDV";
			checkingDv.innerHTML="<span id=\"checkingDvSpan\">checking...</span>";
			phoneInput.parent().append(checkingDv);
			
			let callback = {
				
				success: function(result){
					
					let formatted_phone = JSON.parse(result.responseText);
					if($.trim(formatted_phone.error).length>0){
						$("#checkingDvSpan").css({"color":"#FF0000"});
						$("#checkingDvSpan").text('Invalid Value: '+formatted_phone.error);
						let validationResult = false;
						removeFromValidate("EditView", phoneInput.attr('id'));
						$('.required.validation-message').remove();
						addToValidateCallback("EditView", phoneInput.attr('id'), "varchar", false, formatted_phone.error, function(a,b){ 
						checkingDv.remove();
						
						return validationResult;
						});
					}
					else{
						checkingDv.remove();
						$('.required.validation-message').remove();
						removeFromValidate("EditView", phoneInput.attr('id'));
						phoneInput.val(formatted_phone.output);	
					}						
				},		
				
				error: function(error){
					alert('something went wrong!');
				}
			};
			
			YAHOO.util.Connect.asyncRequest("GET","index.php?entryPoint=FormatPhone&phone="+phoneInput.val(),callback);
	});
});

  1. Quick Repair & Rebuild

  2. Reload the page
    image
    image

Please make changes as per your requirement.

2 Likes
7

Thank you for the help, I’ll try this approach