Skip to main content

AngularJS - Build a custom validation directive for using multiple emails in textarea

AngularJS already supports the built-in validation with text input with type email. Something simple likes the following:
<input name="input" ng-model="email.text" required="" type="email" />
<span class="error" ng-show="myForm.input.$error.email">
        Not valid email!</span>

However, I used a text area and I wanted to enter some email addresses that's saparated by a comma (,). I had a short research and it looked like AngualarJS has not supported this functionality so far. Therefore, I needed to build a custom directive that I could add my own validation functions. My validation was done only on client side, so I used the $validators object.

Note that, there is the $asyncValidators object which handles asynchronous validation, such as making an $http request to the backend.

This is just my implementation on my project. In order to understand that, I supposed you already had experiences with AngularJS and you can catch my point here.

Html code
<textarea rows="3" class="form-control"
 id="dnNoticeInterfaceOtherEmail" name="dnNoticeInterfaceOtherEmail" 
 ng-model='noticeInterface.email.toAddress' ng-maxlength="500" ng-required="true"
 ng-init="dnNoticeInterfaceDialogForm.dnNoticeInterfaceOtherCCEmail.$validate()"
 dn-multiple-email-validator>
</textarea>

<div ng-messages="dnNoticeInterfaceDialogForm.dnNoticeInterfaceOtherEmail.$error" ng-show="dnNoticeInterfaceDialogForm.$submitted" role="alert">
 <div class="alert alert-danger" ng-message="required">
  This field is required.
 </div>
 <div class="alert alert-danger" ng-message="maxlength">
  This field only is allowed up to 500 characters
 </div>
 
 <div class="alert alert-danger" ng-message="dnMultipleEmailValidator">
  This field required a valid email format
 </div>
</div>

Javascript code
//DIRECTIVE FOR NAME MULTIPLE EMAILS
angular.module("dnStandard").directive("dnMultipleEmailValidator", dnMultipleEmailValidatorImpl);
function dnMultipleEmailValidatorImpl() {
 return {
  require: 'ngModel',
  link: dnMultipleEmailValidatorLinkImpl
 };
};

function dnMultipleEmailValidatorLinkImpl(scope, element,  attributes, controller) {
  controller.$validators.dnMultipleEmailValidator = function(modelValue, viewValue) {
   var errorFlag = true;
   if (!controller.$isEmpty(viewValue)) {
   var emailIdsArr = viewValue.split(/,|;/g);
       angular.forEach( emailIdsArr, function( value, key ) {
         if (!dnPattern.EMAIL_PATTERN.test(value.trim())) {
            errorFlag = false;
         }
       });
  }
    return errorFlag;
  };
}

dnPattern.EMAIL_PATTERN =  /^(([^<>()[\]\\.,;:\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,}))$/

References:
[1]. https://docs.angularjs.org/api/ng/input/input%5Bemail%5D
[2]. http://www.treselle.com/blog/angularjs-directives/
[3]. https://docs.angularjs.org/guide/forms

Comments


  1. Thanks for sharing about Angular,It’s a structural framework for dynamic web application; it lets you extend the syntax of HTML to demonstrate your apps components clearly. All functionality happens inside the browser making it an ultimate companion with any server technology.
    Regards,
    Angularjs training in chennai

    ReplyDelete
  2. The oracle database is capable of storing the data in two forms such as logically in the form of table spaces and physically like data files.
    Oracle Training in Chennai | oracle dba training in chennai

    ReplyDelete

  3. Very informative content that guided me to know the details about the training offered in different technology. Angular JS is a structural framework for dynamic web application and angular's data binding eliminates much of the code that you would otherwise write it.
    Angularjs Training in Chennai | angularjs course in chennai

    ReplyDelete
  4. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
    SAS Training in Chennai | SAS Course in Chennai

    ReplyDelete
  5. Updating with the latest technology and implementing it is the only way to survive in our niche. Thanks for making me this article.
    Node JS training in chennai | Node JS training institute in chennai

    ReplyDelete

Post a Comment

Popular posts from this blog

Small Changes to Java 7 via Project Coin and Why They are Useful

Did you know how new features were added into Java 7? The following are functionalities that can be considered.
Source: [1] Project Coin is all about the changes in the range from syntactic sugar to new language feature. This is what we're talking about today.

Since Java 7 is the first version developed in an open source manner, there is an amount of actions that must be performed for any changes as follows:
Update the Java Language Specification (JSL)Implement a prototype in the source compilerAdd library support essential for the changeWrite tests and examplesUpdate documentEtc, ... Project Coin has submitted a lot of proposals (almost 70) but only some of them are chosen to Java 7. Why? Briefly, Java is a rich static type system and it has a lot of possible interaction points between different bits of it. Making changes to this type system is prone to creating unexpected surprises.

Wow! It is tough, right? Let's take a look what features Project Coin brought to Java 7.
Strings…

Climbing Fansipan – Highest Peak of Indochina

Fansipan is a mountain in Vietnam, the highest in Indochina, at 3,143 metres. It is located in the Lào Cai Province of the Northwest region of Vietnam, 9 km southwest of Sa Pa Township in the Hoang Lien Son mountain range. Wikipedia
Currently you can get the peak by cable car; however, I loved to explore it by climbing.

Here are what I have learned from this exciting journey. 💪
Do not procrastinate I have had no experience of climbing a high mountain before. Then, I've sought advice from my friends, but they suggested that I should not make it at that time due to bad weather and lack of experience. I know it never come true unless I just make my decision. Can't wait! Prepare for your journey You firstly need getting to know about the journey, schedule, transportation, etc. Recommended sources: YouTube videos, blog posts and tour companies websites.
Tips - Quality hiking shoes helps a lot - Bring your stuffs as light as possible. Important stuffs: a light raincoat and water (t…

Strategy Design Pattern

For example, I have an program with an Animal abstract class and two sub-classes Dog and Bird. I want to add a new behavior for the class Animal, this is "fly".  Now, I face to two approaches to solve this issue:

1. Adding an abstract method "fly" into the class Animal. Then, I force the sub-classes should be implemented this method, something like:

public abstract class Animal{ //bla bla public abstract void fly(); } public class Bird extends Animal{ //bla bla public void fly(){ System.out.println("Fly high"); } } public class Dog extends Animal{ //bla bla public void fly(){ System.out.println("Cant fly"); } }
2. Creating an interfaces with method "fly" inside. The same issue to abstract class, I force the classes these implement this interface should have a method "fly" inside:

public interface Flyable{ public void fly(); } public class Bird implements Flyable{ //bla bla public void fly(){ System.out.println…

Java Core - Top 10 Questions Every Developer Should Know

#RandomlyPickedByMe

What is the difference between Javascript and Java?Difference between StringBuilder and StringBuffer?Why do I get "SomeType@a3fde" when I print my code?Why is String immutable?Why "equals" method when we have "==" operator?Is List<Dog> a subclass of List<Animal>?Why shouldn't we use raw type?Is Java “pass-by-reference” or “pass-by-value”?What's the advantage of a Java enum versus a class with public static final fields?Why "double x = 0.1 + 0.2" and result of print(x) is 0.30000000000000004?
1. What is the difference between Javascript and Java? Holy crap! (Vietnamese: Thế quái nào lại có câu hỏi ngớ ngẩn vậy chứ?)

"Java and Javascript are similar like Car and Carpet are similar." - Greg Hewgill (on StackOverflow)
2. Difference between StringBuilder and StringBuffer String is immutable. StringBuilder and StringBuffer are mutable. StringBuffer is thread-safe. StringBuilder is modern than StringBuff…

Review - The Object-Oriented Thought Process, by Matt Weisfeld

In this post, I would like to point out what I understood after closing my eyes and thinking about what  exactly I have learned from this book. That means the layout of content does not follow the book.
From Procedural to Object Oriented Once upon a time, there is an issue that it is very hard to test and debug in Procedural programming because the data is sometimes global and can be modified by multiple functions.

Object-Oriented (OO) programming addresses these problems by combining both data and functions into an object. That means only functions belong to the object can access its own data.

Let us check the below two different approaches for a case that we want to transfer information between clients and servers across a network.

-    Procedural programming: a client (browser) transfers a JSON data to a server which needs to know how to process with this data. In order words, a handshaking agreement must be defined for the client and server in order to work together.
-    OO prog…