Phone edit mask?

Hello,

I have a form field defined as:

            type: "input",
            name: "home_phone",
            label: "Home Phone",
            value: "",
            validate: "ValidNumeric",
            required: false

In the back-end SQL database table, the field is described as VARCHAR(10).

I would like the users to be able to enter the phone number in this format (common to USA and Canada):

123.456.7890

but want

1234567890

stored in the database.

How would I implement an edit input mask in Dhtmlxform to do this, please? Thank you.

Hi

{ validate: function(v){return String(v).match(/^\d{10}$/)!=null; }, … }

Hi Andrei,

Thanks, but the code didn’t work.

Here’s what I have:

            type: "input",
            name: "Phone_home",
            label: "Home Phone",
            value: "",
            //validate: "ValidNumeric",
            validate: function(v){return String(v).match(/^\d{10}$/)!=null; },
            required: false

Am I doing something wrong with the code? Please advise. Thanks.

Hi again, Andrei,

Have you been able to determine yet whether I’m correctly applying the edit mask code you provided, please?

Many thanks!

Hi

please provide completed demo

Hello, Andrei,

Please find complete demo attached.

Thank you.
dhtmlx_completed_demo.zip (210 KB)

Hi

your demo have tons of broken dependencies, please fix and attach completed one

Hi,

Can you give me an example of what you call a ‘broken dependency’, please?

I thought I had followed the instructions very closely, so I’m not sure what is missing.

Thanks.

Well,

  1. check paths for js/css files (, <link…>)
  2. if you have serverside you can replace db-connection with single xml files just for loading if any

solution:

myForm.attachEvent("onInputChange", function(name_input, value_input){
       if(name_input == 'phone'){
             var v = value_input;
             v = v.replace(/\D/g, "");
             v = v.substring(0, 9);
             v = v.replace(/^(\d{3})(\d)/g,"$1.$2");
             v = v.replace(/^(\d{3})\.(\d{3})(\d)/g,"$1.$2.$3");
             v = v.replace(/(\d)\.(\d{3})$/,"$1.$2");
             myForm.setItemValue(name_input, v);
       }
}

:slight_smile:

correction:

myForm.attachEvent("onInputChange", function(name_input, value_input){
       if(name_input == 'phone'){
             var v = value_input;
             v = v.replace(/\D/g, "");
             v = v.substring(0, 9);
             v = v.replace(/^(\d{3})(\d)/g,"$1.$2");
             v = v.replace(/^(\d{3})\.(\d{3})(\d)/g,"$1.$2.$3");
             v = v.replace(/(\d)\.(\d{3})$/,"$1.$2");
             myForm.setItemValue(name_input, v);
       }
});

failed ); the end

correction:

replace this:

v = v.substring(0, 9);

so:

v = v.substring(0, 10);

AND

replace this:

v = v.replace(/(\d)\.(\d{3})$/,"$1.$2");

so:

v = v.replace(/(\d)\.(\d{4})$/,"$1.$2");

I did not test the code, sorry

then better

myForm.attachEvent(“onInputChange”, function(name_input, value_input){

myForm.setItemValue(name_input, v);
replace with
myForm.getInput(name_input).value = v;

Thanks @lucas1, but your code caused the screen to go blank. Here’s how I implemented it:

	myForm.attachEvent("onInputChange", function(name_input, value_input, inp){
			if (name_input == "Phone_home"){
				var v = value_input;
				v = v.replace(/\D/g, "");
				v = v.substring(0, 9);
				v = v.replace(/^(\d{3})(\d)/g,"$1.$2");
				v = v.replace(/^(\d{3})\.(\d{3})(\d)/g,"$1.$2.$3");
				v = v.replace(/(\d)\.(\d{3})$/,"$1.$2");
				myForm.setItemValue(name_input, v);		
			}
	}

This is just the latest in a number of puzzling problems. I think there’s some basic flaws in the DHTMLX framework. I’m following the instructions but still having a number of problems like this one.

had some code changes.
try this:

   myForm.attachEvent("onInputChange", function(name_input, value_input, inp){
         if (name_input == "Phone_home"){
            var v = value_input;
            v = v.replace(/\D/g, "");
            v = v.substring(0, 10);
            v = v.replace(/^(\d{3})(\d)/g,"$1.$2");
            v = v.replace(/^(\d{3})\.(\d{3})(\d)/g,"$1.$2.$3");
            v = v.replace(/(\d)\.(\d{4})$/,"$1.$2");
            myForm.getInput(name_input).value = v;
         }
   });

It works, lucas1! Absolutely brilliant. Thank you so very, very much!!!