Merge pull request #904 from sarahannie/signup

adjusted the email signup validation error
camicroscope · Apr 1, 2024 · 9522fe7 · 9522fe7
2 parents fd45197 + 3fcce46
commit 9522fe7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/apps/signup/signup.css b/apps/signup/signup.css
@@ -1,6 +1,3 @@
-/* signup.css */
-
-
 body {
 	color: #999;
 	background: #f5f5f5;
@@ -121,14 +118,10 @@ nav li:not(.active):hover a{
 	color: black;
 	cursor: pointer;
 }
-#info{
-	color: black;
-}
-#sub{
-	font-weight:bold;
-	font-size: 14pt;
-	background-color: #17a2b8;
 
+.error-message {
+	color: red;
+	font-size: 0.8em;
 }
 
 @media screen and (max-width:736px) {
@@ -138,6 +131,6 @@ nav li:not(.active):hover a{
 }
 @media screen and (max-width: 480px) {
 	.signup-form {
-		width: 300px;
+		width: 300px;
 	}
 }
diff --git a/apps/signup/signup.html b/apps/signup/signup.html
@@ -78,8 +78,9 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
         <div class="form-group">
           <div class="input-group">
             <span class="input-group-addon"><i class="fa fa-envelope" style="margin-top: 0.5em;"></i></span>
-            <input id="mail" type="email" class="form-control" name="email" placeholder="Email" required="required">
+            <input id="mail" type="email" class="form-control" name="email" placeholder="Email" >
           </div>
+          <div id="emailerror" class="error-message"></div>
         </div>
         <br>
         <div class="form-group">
@@ -132,5 +133,5 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
     <!-- script to call a footer(layout footer in the common > utils folder) function -->
   <script> insertFooterLayout();</script>
 
-  </body>
-</html>
+  </body>
+</html>
diff --git a/apps/signup/signup.js b/apps/signup/signup.js
@@ -9,12 +9,15 @@ function addUser(){
   // var attr = document.querySelector('input[name="attr"]:checked').value
   var attrEle = document.getElementById("attr");
   var attr = attrEle.options[attrEle.selectedIndex].value;
+  var emailErr = document.getElementById('emailerror');
 
-  if (!(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email))) {
-    window.alert("Please enter a valid email");
-    return;
+  if (email === '') {
+    emailErr.textContent = 'Please enter your email';
+  } else if (!(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email))) {
+    emailErr.textContent = 'Please enter a valid email';
   }
 
+
   var userType = "Null"
   if (attr == "3"){
     userType = "Admin"