39
Views
5
Comments
Solved
How to restrict input to alphabet only using attribute pattern?
Question
Application Type
Reactive

Hi there,

I am trying yo use attribute pattern to restrict to alphabet only, but it does not work:

i still can type numeric inside the input field.

How to worksaround?

regards and thanks

2026-01-23 11-38-55
Dinesh Murugan
Champion
Solution

Hi @Sprint ,


Kindly try the below mentioned forge. Hope this will helps you.

Forge  : Restrict input to alphabet


Warm regards,

Dinesh M 

2025-01-09 14-56-57
IQ78

Hi, thank you.

But i still wonder why OS cannot read the attribute pattern?

regards

2024-10-16 11-59-48
Nick Vandebriel
Solution

Hi Sprint,

This pattern attribute only works inside forms and you have to use the form validation. This will also only work when triggering the action and won't prevent anyone from filling in numbers, they will just get an error message below the input field.

What you could do to have it in realtime is use a forge component or just implement some javascript code in the onready action like below:


var inputs = document.getElementsByClassName('noNumbersClass');

 Array.prototype.forEach.call(inputs, function(input) {    input.addEventListener('keypress', function (event) {        if (event.keyCode >= 48 && event.keyCode <= 57) {            event.preventDefault();          }    });});

This will check all the fields with the noNumbersClass and prevent it from entering numbers. So make sure to set the right class name on your input field. Also use a javascript function in the on destroy action to clean up your eventlisteners when leaving the screen.

Also make sure when using a solution client side that you do the validation server side aswell.

2019-01-07 16-04-16
Siya
 
MVP
Solution

pattern attribute  is used to define a regular expression that the input value must match for the form to be considered valid. This will not prevent you from entering numbers when you specify a pattern like [A-Za-z]*. If you want to prevent user from typing ( in your case numbers ) you need to handle the respective events  (OnPreyPress) and handle from javascript.

2026-01-23 11-38-55
Dinesh Murugan
Champion
Solution

Hi @Sprint ,


Kindly try the below mentioned forge. Hope this will helps you.

Forge  : Restrict input to alphabet


Warm regards,

Dinesh M 

2025-01-09 14-56-57
IQ78

Hi, thank you.

But i still wonder why OS cannot read the attribute pattern?

regards

2024-10-16 11-59-48
Nick Vandebriel
Solution

Hi Sprint,

This pattern attribute only works inside forms and you have to use the form validation. This will also only work when triggering the action and won't prevent anyone from filling in numbers, they will just get an error message below the input field.

What you could do to have it in realtime is use a forge component or just implement some javascript code in the onready action like below:


var inputs = document.getElementsByClassName('noNumbersClass');

 Array.prototype.forEach.call(inputs, function(input) {    input.addEventListener('keypress', function (event) {        if (event.keyCode >= 48 && event.keyCode <= 57) {            event.preventDefault();          }    });});

This will check all the fields with the noNumbersClass and prevent it from entering numbers. So make sure to set the right class name on your input field. Also use a javascript function in the on destroy action to clean up your eventlisteners when leaving the screen.

Also make sure when using a solution client side that you do the validation server side aswell.

2019-01-07 16-04-16
Siya
 
MVP
Solution

pattern attribute  is used to define a regular expression that the input value must match for the form to be considered valid. This will not prevent you from entering numbers when you specify a pattern like [A-Za-z]*. If you want to prevent user from typing ( in your case numbers ) you need to handle the respective events  (OnPreyPress) and handle from javascript.

UserImage.jpg
Suresh kumar

Add oninput event to that input widget,  and in the event handler 

add this java script code      

$parameters.OutputName = $parameters.InputFName.replace(/[^a-zA-Z\s]/g, '');

$resolve();


create input name is the input varible to that javascript widget, and outputname is output of that javascript widget.


assign your local varible of input widget to this javascript, and reassign this output your local variable again


this is prevent entering others values rather than Alphabets

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