adding email format validation in register form

faderskd · Feb 23, 2017 · c6fbca5 · c6fbca5
1 parent 986f7fb
commit c6fbca5
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/openchat/app/components/register-form.js b/openchat/app/components/register-form.js
@@ -1,13 +1,16 @@
 import Ember from 'ember';
-import {TextInput, MaxLength, MinLength} from '../utils/text-input';
+import {TextInput, MaxLength, MinLength, MatchPattern} from '../utils/text-input';
 
 
 export default Ember.Component.extend({
   username: TextInput.create({
     value: '',
     validators: [new MaxLength(30), new MinLength(6)]
   }),
-  email: '',
+  email: TextInput.create({
+    value: '',
+    validators: [new MatchPattern(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i)]
+  }),
   password: '',
   confirmPassword: '',
 
@@ -17,6 +20,10 @@ export default Ember.Component.extend({
   actions: {
     onUsernameChange() {
       this.get('username').validate();
+    },
+
+    onEmailChange() {
+      this.get('email').validate();
     }
   }
 

diff --git a/openchat/app/templates/components/register-form.hbs b/openchat/app/templates/components/register-form.hbs
@@ -23,13 +23,15 @@
 
   <div>
     <label for="email">Email</label>
-    {{ input type="text" value=email id="email" class="form-control"
-             name="email" aria-describedby="emailHelpBlock" }}
-    <div class="alert alert-danger">
-      <div>
-        Email is required.
+    {{ input type="text" value=email.value id="email" class="form-control"
+             name="email" aria-describedby="emailHelpBlock" key-up=(action 'onEmailChange') }}
+    {{#if email.errors}}
+      <div class="alert alert-danger">
+        <div>
+          Provided email is invalid.
+        </div>
       </div>
-    </div>
+    {{/if}}
   </div>
 
   <div>

diff --git a/openchat/app/utils/text-input.js b/openchat/app/utils/text-input.js
@@ -54,6 +54,8 @@ export function MatchPattern(pattern) {
   this.pattern = pattern;
 
   this.isValid = function(value) {
-    return value.match(this.pattern);
-  }
+    let result = this.pattern.test(value);
+    console.log(result);
+    return result;
+  };
 }