34
Views
7
Comments
Solved
Email Validation on keypress

Hi Team,

I need to validate the email from the client side. So, I have configured validation, and it is working. but now I want to restrict the user from entering special characters other than the required format.

Navigation.oml
Solution

Hi Vishal,

I have implement the JavaScript which restrict the special characters and only allow letters, numbers, underscore, dot, hyphen, and @ symbol. Please see the attachment file this file will help you.


Navigation.oml

Thank you, @Prashant Bais . It is working.

Champion

Hi,

You need to build a JS like this bellow one where you will add all the keycode of the char not allowed.

var InputField = document.getElementById($parameters.WidgetId);InputField.addEventListener("keydown", function(event) {    keypressed = event.keyCode || event.which || event.charCode;    if (keypressed == 69 || keypressed == 107 || keypressed == 187) {       event.preventDefault();     }})


Or you can use this component: https://www.outsystems.com/forge/component-overview/8005/restrict-chars-reactive


Regards, PT

Champion

Hii @Vishal Veerakumar,

firstly you need to check you email format/email is valid or not which is already done but when you start apply regex to find special character to prevent user enter special character other that email format 

which is 
somestring@somestring.somestring

above is valid email format, so @ sign can not come more than one time but . (dot) can come like

somestring.somestring2@gmail.com

above should be a valid email address this can be achieve by JS regExp which i have modified little bit.

-----------JS code-----------

email = document.getElementById($parameters.widgetId).value;

// Email is valid, check for unwanted special characters

var emailreg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

if (emailreg.test(email)) {

    var specialCharRegex = /[!#$%^&*()_+{}\[\]:;<>,?~\\/-]/;


    if (specialCharRegex.test(email)) {

        // There are unwanted special characters

        alert('Email contains special characters other than the required format.');


        $parameters.IsValidEmail = false;

    } else {

        // Email is valid and doesn't contain unwanted special characters


        $parameters.IsValidEmail = true;


        $parameters.IsValidEmail = true;

    }

} else {


    $parameters.IsValidEmail = false;

}


I am also attaching OML file

    

NavigationUpdated.oml

Hi @Sanjay Kushwah ,

Thanks for your message. I have checked your updated OML. but still, I'm able to type special characters in the input field. I just want to prevent users from entering special characters, and I don't need to display any error messages. The system should accept only if the email field is in the proper format.

Hi Vishal ,

Please see the attachment file this file will help you for your task 


Eamil validation.oml
Solution

Hi Vishal,

I have implement the JavaScript which restrict the special characters and only allow letters, numbers, underscore, dot, hyphen, and @ symbol. Please see the attachment file this file will help you.


Navigation.oml

Thank you, @Prashant Bais . It is working.

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