Phone Number Validation and Highlighting of Headers

Hi everyone,

How can I do the phone number validation in the input field where the user can only type 10 digits , and should throw validation message as invalid phone number if letters , special characters are used.


Also how can i highlight headers in tabs after filling up each form in the tab content and clicking on next.


Hello soumya,

I want to suggest one thing if you want mobile validation used masking component which I mention
https://www.outsystems.com/forge/component-overview/7838/inputmask-react

https://www.outsystems.com/forge/component-overview/8005/restrict-chars-reactive

and for checking that mobile number is valid or not used this js on onchange of that box

var pattern = new RegExp("^[6-9]\\d{9}$");

$parameters.IsValid = pattern.test($parameters.MobileNumber);

It will not allow user to type anything expect mobile number, that's better approach instead of this.

Thanks and Regards,

Akshay Deshpande

Thanks for your response and i would like to know the highlighting of the tabs once filling the form and clicking on the next button the previous tab and the present tab should get highlighted. How can I achieve this one?

To highlight the tab which is already filed you need to add customize class if active tab is three then
(activetab>=3, "color:red","")

but instead of using tabs for process checking used wizard it will used for that only to step by step complete process

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Traditional_Web_Patterns/Navigation/Wizard

Check above documentation

To highlight the tab which is already filed you need to add customize class if active tab is three then
(activetab>=3, "color:red","")

but instead of using tabs for process checking used wizard it will used for that only to step by step complete process

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Traditional_Web_Patterns/Navigation/Wizard

Check above documentation

Hi Soumya,
OnChange event of your phone number input, you can add javscript to check valid or not

var inputtxt=document.getElementById(@input_Param)
 var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  if(inputtxt.value.match(phoneno)) {
    @output_param.value=true;
  }
  else {
   
        @output_param.value=false;
  }

Now based on response you can make valid invalid using assign

input_phone->valid

input_phone->invalid

input_phone->validation massage

Hope you understood.

Thanks

Yogesh


Hello soumya,

I want to suggest one thing if you want mobile validation used masking component which I mention
https://www.outsystems.com/forge/component-overview/7838/inputmask-react

https://www.outsystems.com/forge/component-overview/8005/restrict-chars-reactive

and for checking that mobile number is valid or not used this js on onchange of that box

var pattern = new RegExp("^[6-9]\\d{9}$");

$parameters.IsValid = pattern.test($parameters.MobileNumber);

It will not allow user to type anything expect mobile number, that's better approach instead of this.

Thanks and Regards,

Akshay Deshpande

Thanks for your response and i would like to know the highlighting of the tabs once filling the form and clicking on the next button the previous tab and the present tab should get highlighted. How can I achieve this one?

To highlight the tab which is already filed you need to add customize class if active tab is three then
(activetab>=3, "color:red","")

but instead of using tabs for process checking used wizard it will used for that only to step by step complete process

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Traditional_Web_Patterns/Navigation/Wizard

Check above documentation

Hi @Soumya Mukhopadhyay 

You need to validate the phone number using regex

1. Create Regex_Search server action and apply the regex.



I hope this will help you

Thanks and regards

Vednarayan 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.