updating email Validator (#1045)

surbhi400 · web-flow · commit 4e6faf007110 · 2023-04-30T09:45:49.000-07:00
* updating email Validator

* updating Email Validator

* update emailvalidator
diff --git a/Public/EmailValidator.html b/Public/EmailValidator.html
@@ -5,13 +5,25 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="../assets/css/EmailValidator.css">
+
     <title>Email Validator</title>
+
 </head>
 <body>
-    <form action="#">
-        Email <input type="text" name="name" id="name"><br>
-        <button id="submit"> Submit </button>
+    <div class="container">
+        <h2> Email Validator
+            <hr>
+        </h2>
+    <form name="myForm" onsubmit="ValidateEmail(document.myForm.Email)">
+    <p class="EmailId">
+        <label for="email">Email Id:</label>
+    </p>
+       <input type="text" id="email" name="Email" placeholder="example@gmail.com">
+       <button id="submit" class="btn">Submit</button>
     </form>
+    </div>
 </body>
 <script src="../assets/Js/EmailValidator.js"></script>
+
 </html>
+
diff --git a/assets/Js/EmailValidator.js b/assets/Js/EmailValidator.js
@@ -1,27 +1,21 @@
-let nameinform = document.getElementById('name');
-let number = document.getElementById('number');
-let password = document.getElementById('password');
+let nameinform = document.getElementById('email');
 let button = document.getElementById('submit');
-
-function submit()
-{
-    if(nameinform.value.includes("@") && nameinform.value.includes("."))
-    {
-        if(nameinform.value.indexOf("@")>0 && nameinform.value.indexOf(".")>nameinform.value.indexOf("@") && nameinform.value.indexOf(".")!=nameinform.value.length)
-        {
-            alert("Successful Registration");
-        }
-        else
-        {
-            alert("Please Provide Correct Email Address");
-        }
-    }
-    else
-    {
-        alert("Please Provide Correct Email Address");
-    }
-
+function ValidateEmail(inputText) {
+  var data = inputText.value;
+    var atSign = data.indexOf("@");
+    var dotSign = data.indexOf(".");
+  if (atSign<1 ) {
+    alert("Invalid @ position");
+    return false;
+  }
+  else if (dotSign<atSign+2 || dotSign+2>=data.length){
+     alert("Invalid . position");
+    return false;
+  }
+  else{
+    alert("Your Email Id is correct");
+    return true;
+  }
 }
-button.addEventListener('click',submit);
 
 
diff --git a/assets/css/EmailValidator.css b/assets/css/EmailValidator.css
@@ -1,19 +1,46 @@
-body
-{
-    background-color: pink;
+body {
+    display: flex;
+    justify-content: center;
+    background-color: teal;
 }
 
-form
-{
-    margin: 10%;
+.container {
+    background-color: white;
+    margin-top: 160px;
+    width: 560px;
+    height: 300px;
+    text-align: center;
+    border-left: 15px solid coral;
+    border-radius: 5px;
+
+}
+h2 {
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size: 24px;
 }
 
-form input
-{
-    margin: 4%;
+.EmailId {
+    font-size: 22px;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    margin-top: 34px;
 }
 
-button
-{
-    padding: 2%;
+#email {
+    height: 30px;
+    width: 245px;
+    font-family: cursive;
+}
+.btn {
+    margin-top: 34px;
+    height: 38px;
+    width: 100px;
+    border-radius: 5px;
+    border: 1px solid black;
+    background-color: teal;
+    color: white;
+    font-size: 15px;
+}
+.btn:hover {
+    background-color: coral;
+    cursor: pointer;
 }
