Validation: only alphanumeric characters in an input field (without JavaScript?)

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?

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

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

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)


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?

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.

Hi,


Outsystems gives us to validate data in controls using regex.

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.