2240
Views
7
Comments
Validation: only alphanumeric characters in an input field (without JavaScript?)
Question

In an input field, how do you ensure that user can only key in alphanumeric characters (i.e. A-Za-z0-9)? Is there a way to do it without JavaScript?

2019-05-22 11-30-09
Marcelo Ferreira

Hi,

To accomplish that you always need JavaScript. If you are not comfortable with it you can use a component that wraps the JavaScript for you. One example is this component.

Regards,

Marcelo

2017-12-13 08-27-28
Joey Moree

Pretty much the same as your other topic. Like said by Marcelo you can use the input masks component.

But as I said in the other topic aswell: though users can go around that by being sneaky and changing your html. Thus you should always be validating again on the server side just to be sure.

Here's the regex to validate for alphanumeric characters:

https://refiddle.com/refiddles/5cbefa4375622d10f3710000

2019-08-31 06-59-55
YS

Joey Moree wrote:

Pretty much the same as your other topic. Like said by Marcelo you can use the input masks component.

But as I said in the other topic aswell: though users can go around that by being sneaky and changing your html. Thus you should always be validating again on the server side just to be sure.

Here's the regex to validate for alphanumeric characters:

https://refiddle.com/refiddles/5cbefa4375622d10f3710000


Like this?

2017-06-21 13-04-28
Mikko Nieminen

YS Yeo wrote:

In an input field, how do you ensure that user can only key in alphanumeric characters (i.e. A-Za-z0-9)? Is there a way to do it without JavaScript?

Using HTML5 input field of type "Text" has a support for regular expression patterns, one example tutorial for no-JS form validation can be found from Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression

For complete client-side solution I'd still go with JavaScript as Marcelo mentioned - input field patterns are not perfectly supported: https://caniuse.com/#feat=input-pattern

br,

-Mikko(N)


2017-12-13 08-27-28
Joey Moree

YS Yeo,

Within the advancedoptions you will have to keep a format like

"{regex: ""[A-Za-z0-9]*""}"

It's a json object after all.

Alternatively you can use an extended attribute on your input,called data-inputmask-regex

So you get this following example from the documentation:

<input data-inputmask-regex="[A-Za-z0-9]*" />

Honestly I think this is easier than using the advancedoptions.

2024-06-19 07-19-32
JitendraYadav

Hi,


Outsystems gives us to validate data in controls using regex.

2017-12-13 08-27-28
Joey Moree

JitendraYadav wrote:

Hi,


Outsystems gives us to validate data in controls using regex.


Yeah! I was initially talking about this action, since you can use it for server side validation instead of relying on javascript.

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