Custom validation of input elements


I am trying to validate the following input elements as follows:

*Phone number: Have 12 digits (already done), Must start with the “212” (country code), the 4th digit must be either “5”, “6”, or “7”.

*ID card number validation: Have 7 to 8 characters (already done), start with a letter, second element can be either a number or a letter, the following characters must be numbers.

Do you know how I can do this?

Thank you,

Hi there, @rochdi.mohamedtarik… I played around with regex for a bit (truth be told, it usually scares the heck out of me), and these patterns seem to do what you described.

Phone number: [1][1][2][5-7][0-9]{8}$

ID card number: [2][a-z0-9][0-9]{6}$

The second one is validating for 8 characters, but if you change the 6 at the end to a 5, it will validate for 7 characters.

I made a quick example for the phone number where I have an input into which a phone number is entered, and I have an icon that is only visible if the phone number meets the criteria you specified. This condition on the icon makes it visible when the phone number is valid.

Hope this helps.


  1. 2 ↩︎

  2. a-z ↩︎

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.