prograd-org · balaji191096 · Aug 2, 2021 · Aug 2, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+     "editor.fontFamily": "Consolas",
+     "breadcrumbs.showProperties": false,
+     "breadcrumbs.showNull": false
+}
diff --git a/app.js b/app.js
@@ -1 +1,92 @@
-/* Fill your code*/
+function formValidate(){
+var name = document.forms["RegForm"]["Name"];
+var address = document.forms["RegForm"]["Address"];
+var email = document.forms["RegForm"]["EMail"];
+var password = document.forms["RegForm"]["Password"];
+var cpassword = document.forms["RegForm"]["cPassword"];
+var phone= document.forms["RegForm"]["phone"];
+
+
+errname = document.getElementById("name");
+erraddress = document.getElementById("address");
+erremail = document.getElementById('email');
+errpassword = document.getElementById("pwd");
+errcpassword = document.getElementById("cpwd");
+errphone = document.getElementById("phone");
+
+if (name.value.length<3){
+    errname.innerText = "Name field should have atleast 8 to 15 Characteres";
+    name.focus();
+    return false;
+}
+    else {
+        errname.innerText = "";
+}
+
+if (address.value == ""){
+    erraddress.innerText = "Address field should not be Empty";
+    address.focus();
+    return false;
+}
+else {
+    erraddress.innerText ="";
+} 
+if (email.value == ""){
+    erremail.innerText = "Email should not be empty";
+    email.focus();
+    return false;
+}
+else if(/^[a-z0-9+_.-?&^"':]+@[a-z0-9.-]+$/i.test(email.value)){
+    erremail.innerText = "";
+} 
+else {
+    errname.innerText = "Email is invalid";
+    email.focus();
+    return false;
+}
+
+if (password.value == "")
+{
+    errpassword.innerText = "Password field should not be empty";
+    password.focus();
+    return false;
+}
+else if(password.value.match(/^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,}$/)){
+    errpassword.innerText = "";
+}
+else{
+    errpassword.innerText = "Password should have minimum of 8 characters";
+    password.focus();
+    return false;
+}
+if (cpassword.value == "")
+{
+    errcpassword.innerText = "Password field should not be empty";
+    cpassword.focus();
+    return false;
+}
+else if(cpassword.value.match(/^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,}$/) && cpassword.value === password.value){
+    errcpassword.innerText = "";
+}
+else{
+    errcpassword.innerText = "Password not match";
+    cpassword.focus();
+    return false;
+}
+if(phone.value == ""){
+    errphone.innerText = "Kindly type your mobile number";
+    phone.focus();
+    return false;
+}
+else if (/^[0-9]{10}$/.test(phone.value)){
+    errphone.innerText = "";
+}
+else{
+    errphone.innerText = "Invalid Mobile Number";
+    phone.focus();
+    return false;
+}
+
+
+
+  }
diff --git a/assets/ok.png b/assets/ok.png
diff --git a/index.html b/index.html
@@ -8,26 +8,20 @@
 </head> 
 <body> 
 <h2 style="text-align: center"> FORM VALIDATION</h2>           
-<form name="RegForm" action="/" onsubmit="return formValidate()" method="post">  
-    <p>Name : <input type="text" name="Name"></p>
-     <label class="alert" id="name"></label><br>  
+<form name="RegForm" action="result.html" onsubmit="return formValidate()" autocomplete="on">  
+    <p>Name : <input type="text" name="Name"></p><label class="alert" id="name"></label><br> 
 
-    <p> Address : <input type="text" name="Address">  </p>
-     <label class="alert" id="address"></label><br> 
+    <p> Address : <input type="text" name="Address">  </p><label class="alert" id="address"></label><br> 
 
-    <p>E-mail : <input type="text"  name="EMail"></p>
-     <label class="alert" id="email"></label><br> 
+    <p>E-mail : <input type="email"  name="EMail"></p><label class="alert" id="email"></label><br> 
 
-    <p>Password : <input type="password" name="Password"> </p>
-    <label class="alert" id="pwd"></label><br> <br> 
+    <p>Password : <input type="password" name="Password"> </p><label class="alert" id="pwd"></label><br> 
 
-    <p>Confirm Password : <input type="password" name="cPassword"> </p>
-    <label class="alert" id="cpwd"></label><br> <br>
+    <p>Confirm <br>Password : <input type="password" name="cPassword"> </p><label class="alert" id="cpwd"></label> <br>
 
-    <p>Phone : <input type="number" name="phone"> </p>
-    <label class="alert" id="phone"></label><br> <br>   
+    <p>Phone : <input type ="number" name="phone"> </p><label class="alert" id="phone"></label><br>   
 
-    <p><input type="submit" value="Check" name="Submit"></p><br>   
+    <p><input type="submit" value="Submit"  id = "submit" name="Submit"></p><br>
 
 </form> 
 </body> 

diff --git a/result.html b/result.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+     <meta charset="UTF-8">
+     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <title>Validation</title>
+     <style>
+     p{
+          font-size:50px ;
+          text-align: center;
+
+          font-weight: bolder;
+     }
+     img{
+          width:400px;
+          height:400px;
+
+     }
+     div{
+          display:flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+     }
+     </style>
+</head>
+<body>
+     <div>
+          <p>Thank you.  Your form is submitted successfully!!! </p>
+          <img src="./assets/ok.png" alt="">
+
+
+     </div>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -1,4 +1,4 @@
-   
+
 div {  
     box-sizing: border-box; 
     width: 100%; 
@@ -17,13 +17,25 @@ form>p{
     display: flex;
     flex-direction: row;
     justify-content: center;
-
+    
 }
 input{
-    width: 300px;
+    width:auto;
+    height:30px;
     margin-left: 2%;
     float: inline-end;
+    border-radius:4px;
+    border:1px solid black;
+
 }
 .alert{
     color: red;
+}
+#submit{
+    background-color: rgb(190, 149, 72);
+    width:150px;
+    height:30px;
+    border:2px solid black;
+    border-radius:10px;
+    font-weight: bolder;
 }