The phone field Validator

Hello,

I wish everyone at the forum a happy New year 2012.

I have been working on a java script to validate my phone field but there seems to be a syntax error the script does not work.

Please help.

function ValidPhone(aphone)
{
// declare valid variable as a string with all valid characters (digits from 0 to 9 )
    var valid = "0123456789";
//if phone field is empty - display a warning and open window with choice
         if(aphone=="")
         {
 window.addEvent('domready', function() {
      var answer = true;
      $('submit').addEvent('click', function(event) {
        if ( answer && !$('phone').value ) {
          new Event(event).stop();
          answer = confirm("A  service executive can provide you better support if we have your telephone number. Your information is safe and will not be disclosed without your permission. We are a responsible company and provides service to its customers effectively. If you do not want to provide us your telephone number just press = cancel =. \n Would you like to provide your telephone number ?");
        }
//if number of character in phone field is not equal 10 - display warning and return false
         if(aphone.length !=10)
         {
    alert("Invalid phone number length! Please try again.")
         return false
         }
        //check each character entered in the phone field
         for (var i=0; i < aphone.length; i++)
         {
         //put in temp variable each character, one at a time.
         temp = "" + aphone.substring(i, i+1);
    //check index of a phone character in the "valid" variable.
    // if temp contains a character which is not in "valid" variable,
    //then valid.indexOf(temp) will be -1, otherwise it may be 0.1.2.3.4.5.6.7.8 or 9

         if (valid.indexOf(temp) == "-1")
         {
    alert("Invalid characters in your phone. Please try again.")
          return false;
         }
    }
    //if all conditions are passed, then return true
    return true
   }

Thanks in Advance.

Ron

Hi Ronn,
The first issue, is that you add a hook to the DOMReady event within your validation-function. This event will only trigger once as the page completes loading. Hence, once your validation-code is actually run, though the hook is created - it will never be executed.

Further, properly indenting the code reveals that you are missing several } and ) in the end, so you are most likely seeing all kinds of JS-errors in your browser.

Assuming you'd like the code to trigger on the Click-event of the submit-button, the code would be written somewhat like this:

//Use the DOMReady event to add our validation once the page is fully loaded...
window.addEvent('domready', function() {
	//Add our validation to the click event of the submit button...
	$('submit').addEvent('click', function(event) {
		//Read the value from the form input
		var phoneNumber = $('phone').value;

		//Using lazy evaluation here...
		//IF the length of the phonenumber is 0, then we ask the user about it...
		//IF the user also presses OK, we'll interrupt the form submission!
		if (
			phoneNumber.length == 0 &&
			confirm("A service executive can provide you better support if we have your telephone number. Your information is safe and will not be disclosed without your permission. We are a responsible company and provides service to its customers effectively. If you do not want to provide us your telephone number just press = cancel =. \n Would you like to provide your telephone number ?"))
		{
			return false;
		} else if (phoneNumber.length != 10)
		{
			alert("Invalid phone number length! Please try again.");
			return false;
		//Use a regular expression to see whether the phone number only contains digits...
		} else if (!phoneNumber.match(/^[0-9]+$/ig))
		{
			alert("Invalid characters in your phone number. Please try again.");
		}
		return true;
	});
});

This could probably be tidyed up further, but atleast I think it should get you going further on this.

/Fredrik

Thanks Fredrik,

You are there again to my rescue🙂 . Thanks a ton for the script. I have tried to use it but it conflicts with my other .js scripts. Every other script fails to work along with it. It does not even works alone. There is no pop up window on submit.
The form fields submit has "submit" as 'id' and 'name' and the phone filed has "phone" as 'id' and 'name'.

Do I have to call this function ? If I have to please let me know how ..

Thanks again

Ron

Hi Ronn,
Unfortunately, it's hard to tell where things break without seeing the actual page itself.

/Fredrik

Do I PM you the link and login details ??

Sure,
I can't promise that I've got time to look at it tonight, though.

/Fredrik

Hi Fredrik,
I have sent you a PM.
Ron

Hi Ronn,
It turned out to be a rather simple fix;
The code needs to be attached to the form's submit-event, not the submit-button's click-event:

window.addEvent("domready", function() {
	$('chronoform_contact').addEvent('submit', function(event) {
		//Read the value from the form input
		var phoneNumber = $('phone').value;
		//IF the length of the phonenumber is 0, then we ask the user about it...
		if (phoneNumber.length == 0)
		{
			//IF the user also presses Cancel, we'll approve the form submission!
			if (!confirm("A service executive can provide you better support if we have your telephone number. Your information is safe and will not be disclosed without your permission. We are a responsible company and provides service to its customers effectively. If you do not want to provide us your telephone number just press = cancel =. \n Would you like to provide your telephone number ?"))
			{
				return true;
			} else
			{
				return false;
			}
		} else if (phoneNumber.length != 10)
		{
			alert("Invalid phone number length! Please try again.");
			return false;
			//Use a regular expression to see whether the phone number only contains digits...
		} else if (!phoneNumber.match(/^[0-9]+$/ig))
		{
			alert("Invalid characters in your phone number. Please try again.");
			return false;
		}
		return true;
	});
});

Also fixed a minor logic-issue regarding empty/confirm-box. Should work a little smoother now.

/Fredrik

Hi Ronn,
It turned out to be a rather simple fix;
The code needs to be attached to the form's submit-event, not the submit-button's click-event:
/Fredrik

Thanks Fredrik,

I have checked but where do I find the form's submit-event. and How do I attach it? Please advise

thanks

Ron

Hi Ronn,
Sorry, seems I pasted the wrong copy of code. It's been updated now.
When talking about events here, I'm referring to javascript events, nothing related to ChronoForms.

/Fredrik

Fredrik,

The script does not seem to work. I have only this script running at the moment but it does not work.

Any suggestions !

Ron

Hi Ronn,
The script seems to work just fine for me using either Mozilla Firefox, Google Chrome, or Microsoft Internet Explorer.

/Fredrik

Thanks Fredrik,

I cleared the cache and it works. Thanks for all the help. I am slowly going to add other scripts now.

Thanks again

Ron😀