Validation of emails containing unicode characters in Angular JS

Question

Validation of emails containing unicode characters in Angular JS

Currently, I am dealing with a sign-up form for an application where AngularJS is handling the validation process.

An obstacle arose when AngularJS refused to accept an email address containing an apostrophe, for example: "Pear'[email protected]".

Upon investigation, it was revealed that AngularJS has issues with unicode characters in email addresses.

If anyone else has encountered this problem before, I would greatly appreciate any advice on resolving this bug within AngularJS.

Your insights and suggestions will be highly valued. Thank you!

javascript angularjs

Answer 1

Answer №1

If it's not absolutely necessary to have html5 <input type=email />, you have the option of using <input type=text /> with pattern validation

 <input type="text" ng-model="field" ng-pattern="EMAIL_REGEXP" />

Additionally, you can implement the regex provided by @Andy Joslin in his answer

 $scope.EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*$/i;

Answer 2

If it's not absolutely necessary to have html5 <input type=email />, you have the option of using <input type=text /> with pattern validation

 <input type="text" ng-model="field" ng-pattern="EMAIL_REGEXP" />

Additionally, you can implement the regex provided by @Andy Joslin in his answer

 $scope.EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*$/i;

Answer 3

Answer №2

To verify an email address, AngularJS utilizes a specific regular expression. You can create your custom directive by following the same approach and modifying the regular expression to suit your requirements. Here's how you can do it:

Simply copy the directive code from AngularJS and adjust the regex pattern as needed: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L606-L614

myApp.directive('nanuEmail', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attrs, model) {
      //modify this:
      var EMAIL_REGEXP = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
      var emailValidator = function(value) {
      if (!value || EMAIL_REGEXP.test(value)) {
        model.$setValidity('email', true);
        return value;
      } else {
        model.$setValidity('email', false);
        return undefined;
      }
      model.$parsers.push(emailValidator);
      model.$formatters.push(emailValidator);
    }
  };
});

Once done, you can use the directive in your HTML like so:

<input nanu-email ng-model="userEmail">

Answer 4

To verify an email address, AngularJS utilizes a specific regular expression. You can create your custom directive by following the same approach and modifying the regular expression to suit your requirements. Here's how you can do it:

Simply copy the directive code from AngularJS and adjust the regex pattern as needed: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L606-L614

myApp.directive('nanuEmail', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attrs, model) {
      //modify this:
      var EMAIL_REGEXP = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
      var emailValidator = function(value) {
      if (!value || EMAIL_REGEXP.test(value)) {
        model.$setValidity('email', true);
        return value;
      } else {
        model.$setValidity('email', false);
        return undefined;
      }
      model.$parsers.push(emailValidator);
      model.$formatters.push(emailValidator);
    }
  };
});

Once done, you can use the directive in your HTML like so:

<input nanu-email ng-model="userEmail">

Answer 5

Answer №3

After making a simple update to the regex in the angular.js file by adding a single quote, everything started working smoothly without any further modifications needed.

With the inclusion of a single quote within the expression, EMAIL_REGEXP now reads /^[A-Za-z0-9._%+-']+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$/ . I want to extend my gratitude to Vittore for suggesting this REGEX update. :)

Answer 6

After making a simple update to the regex in the angular.js file by adding a single quote, everything started working smoothly without any further modifications needed.

With the inclusion of a single quote within the expression, EMAIL_REGEXP now reads /^[A-Za-z0-9._%+-']+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$/ . I want to extend my gratitude to Vittore for suggesting this REGEX update. :)

Answer 7

Answer №4

What causes the return of undefined?

Here is a revised version of the function:

const validateEmail = function (email) {
  if ((typeof email !== "undefined") && email !== "") {
    return regex.test(email);
  }
};

Answer 8

What causes the return of undefined?

Here is a revised version of the function:

const validateEmail = function (email) {
  if ((typeof email !== "undefined") && email !== "") {
    return regex.test(email);
  }
};

Answer 9

Answer №5

In Angular, there is an issue with validating the apostrophe (') in email IDs. To address this, you can modify the regular expression as shown below:

(/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/)

Change it to:

/^[A-Za-z0-9._%+'-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/.

This adjustment should resolve the problem and allow for proper validation.

Answer 10

In Angular, there is an issue with validating the apostrophe (') in email IDs. To address this, you can modify the regular expression as shown below:

(/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/)

Change it to:

/^[A-Za-z0-9._%+'-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/.

This adjustment should resolve the problem and allow for proper validation.

Validation of emails containing unicode characters in Angular JS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Locate commas within quotation marks using regex and replace them with their corresponding HTML entity

Is there a way to customize the look of the time selected in the <input matInput type="time" step="1" /> time picker?

Showing a pop-up dialog box once a value has been selected

Implementing Table Updates in Yii2 using Ajax Calls

Convert req.query to an object while using Express with MongoDB

Determining if an event is already associated with a marker in Google Maps API v3

Set the style properties of one class to match the style properties of another class using JavaScript

Tips on causing a forEach loop to pause for a regex substitution to occur

Qt offers a powerful feature that allows the seamless exposure of any C++ object to Javascript

Looping through a set of API calls using JavaScript Web API

LinkText is having trouble retrieving information from the UL user interface using angularjs

Displaying md-error within md-input-container using Angular without relying on Validators within the associated formControl

Flickering transitions in Phonegap and jQuery Mobile pages

Is there a way to modify a CSS class in Chrome that is only visible when I perform a drag action?

Is there a specific approach for linking together two AngularJs service calls and executing a function with the obtained data?

JavaScript method to clear a variable

Javascript promises executing in a mixed-up sequence

Is there a way to prevent the back button from functioning in my web browser?

Preventing links from functioning on dynamically generated web pages

Setting the state of a nested array within an array of objects in React