Angular Email validation for empty and pattern

Question

I am evaluating if the email input is empty or if its not the right pattern. If it is so the emailError is getting value true and further code doesn't execute

if(typeof($rootScope.email) === 'undefined' || /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($scope.email)){
        $scope.emailError = true;
    }

It evaluates the empty input but doesn't check the pattern correctly. Where did I go wrong?

Edit: The html part looks like so:

<input ng-class="{true:'error-bron', false:'nonerror-bron'}[emailError===true]" ng-if="$root.lang ==='en'" type="email" maxlength="40"  required class="bron-input" placeholder="Email" ng-model="$root.email"/>

After that it goes into function if all the fields are valid:

if(!$scope.nameError && !$scope.emailError && !$scope.phoneError){

If I put the pattern validation inside html then it checks it fine on the first time but after the form has been submitted and the user decides to open the pop up again then the values are initially valid and the user can send even an empty email. Hence why Id like to check it inside this function that is executed when user presses submit button.

Niladri Basu · Accepted Answer · 2018-02-06 09:18:49Z

1

Do something like this perhaps:

if(typeof($rootScope.email) === 'undefined' || !(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test($scope.email))){
        $scope.emailError = true;
}

edited Feb 6, 2018 at 9:18

answered Feb 6, 2018 at 9:00

Niladri Basu

10.7k7 gold badges59 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Petroskali Over a year ago

Thank you for the new pattern but the fault must be elsewhere since in its current form it is not even going through the function on pressing submit

Ali Shawky · Accepted Answer · 2018-02-06 08:57:52Z

0

Try This :-

<input type="email" name="email" ng-model="email" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern = '/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i' required />

answered Feb 6, 2018 at 8:57

Ali Shawky

1041 silver badge8 bronze badges

2 Comments

Petroskali Over a year ago

Thank you. I did try checking the pattern from html but if I do so it checks the pattern once but if the user opens the pop up with the form again (without refreshing the entire page) then the values are set to valid. At the end of my function that is executed when user presses submit I do set all the values to empty and I even tried adding the touched values. But that didnt help either. $rootScope.email = ""; $rootScope.email.$touched = true;

Ali Shawky Over a year ago

You are looking for another logic so please provide me with the whole logic to try to help you .. Thanks

Collectives™ on Stack Overflow

Angular Email validation for empty and pattern

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related