prograd-org · likithreddy1 · Oct 18, 2021
diff --git a/app.js b/app.js
@@ -1 +1,106 @@
 /* Fill your code*/
+
+const pattern = {
+    username: /^[a-z\d]{8,15}$/i,
+    email: /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/,
+    password: /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*()]).{8,20}$/,
+    phone:/^\d{10}$/,
+}
+
+function formValidate(){
+    // values
+    let name = document.forms["RegForm"]["Name"];
+    let address = document.forms["RegForm"]["Address"];
+    let email = document.forms["RegForm"]["EMail"];
+    let password = document.forms["RegForm"]["Password"];
+    let cpassword = document.forms["RegForm"]["cPassword"];
+    let phone = document.forms["RegForm"]["phone"];
+    // error display
+    let errname = document.getElementById("name");
+    let erraddress = document.getElementById("address");
+    let erremail = document.getElementById("email");
+    let errpassword = document.getElementById("pwd");
+    let errcpassword = document.getElementById("cpwd");
+    let errphone = document.getElementById("phone");
+    let result = document.getElementById("result");
+
+    // verifing name
+    if(pattern.username.test(name.value)){
+        errname.textContent="";
+    }
+    else{
+        errname.textContent="Atleast 8 to 15 Character Required";
+        name.focus();
+        return false;
+    }
+
+    //verifing address
+    if(address.value==""){
+        erraddress.textContent="Address cannot be empty. Kindly fill ";
+        address.focus();
+        return false;
+    }
+    else{
+        erraddress.textContent="";
+    }
+
+    //verifing  email
+    if(email.value==""){
+        erremail.textContent="Email cannot be empty. Kindly fill ";
+        email.focus();
+        return false;
+    }
+    else if(pattern.email.test(email.value)){
+        erremail.textContent="";
+    }
+    else{
+        erremail.textContent="Enter a vaild Email";
+        email.focus();
+        return false;
+    }
+
+    //verifing password
+    if(password.value==""){
+        errpassword.textContent="Kindly fill the Password";
+        password.focus();
+        return false;
+    }
+    else if(pattern.password.test(password.value)){
+        errpassword.textContent="";
+    }
+    else{
+        errpassword.textContent="password must contain 1 uppercase letter, 1 lowercase letter, atleast 1 number any Symbols";
+        password.focus();
+        return false;
+    }
+
+    // confirm password
+    if(cpassword.value==""){
+        errcpassword.textContent="Kindly confirm your password";
+        cpassword.focus();
+        return false;
+    }
+    else if(cpassword.value==password.value){
+        errcpassword.textContent="";
+    }else{
+        errcpassword.textContent="Password and confirm password must be same";
+        cpassword.focus();
+        return false;
+    }
+    //verifing number
+    if(phone.value==""){
+        errphone.textContent="Kindly fill the phone number";
+        phone.focus();
+        return false;
+    }
+    else if(pattern.phone.test(phone.value)){
+        errphone.textContent="";
+        result.textContent="Regex validation Success";
+        return false;
+    }
+    else{
+        errphone.textContent="Enter a valid 10 digit number";
+        phone.focus();
+        return false;   
+    }
+}
diff --git a/index.html b/index.html
@@ -7,28 +7,44 @@
     <link rel="stylesheet" href="style.css">
 </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>  
-
-    <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>Password : <input type="password" name="Password"> </p>
-    <label class="alert" id="pwd"></label><br> <br> 
-
-    <p>Confirm Password : <input type="password" name="cPassword"> </p>
-    <label class="alert" id="cpwd"></label><br> <br>
-
-    <p>Phone : <input type="number" name="phone"> </p>
-    <label class="alert" id="phone"></label><br> <br>   
-
-    <p><input type="submit" value="Check" name="Submit"></p><br>   
-
-</form> 
+    <form name="RegForm" action="/" onsubmit="return formValidate()" method="post">  
+<h2 style="text-align: center"> FORM VALIDATION</h2>  
+<table>
+    <tr><td> Name : </td>
+        <td><input type="text" name="Name"></td> 
+        <td><label class="alert" id="name">Atleast 8 to 15 Character Required</label></td> 
+   </tr>
+    <tr>
+        <td>Address : </td>
+        <td><input type="text" name="Address"></td>
+            <td><label class="alert" id="address">Address cannot be empty. Kindly fill </label></td>
+     </tr>
+    <tr>
+        <td>E-mail : </td>
+        <td><input type="text"  name="EMail"></td>
+        <td><label class="alert" id="email">Email cannot be empty. Kindly fill</label></td>
+     </tr>
+    <tr> 
+        <td>Password : </td>
+        <td><input type="password" name="Password"></td>
+        <td><label class="alert" id="pwd">Kindly fill the Password</label></td>
+    </tr>
+    <tr>
+        <td>Confirm Password : </td>
+        <td><input type="password" name="cPassword"></td>
+        <td><label class="alert" id="cpwd">Kindly confirm the Password</label></td>
+    </tr>
+    <tr> 
+        <td>Phone :</td>
+        <td><input type="number" name="phone"></td>
+        <td><label class="alert" id="phone">Kindly fill the phone number</label></td>
+    </tr>
+    <tr>
+        <td></td>
+        <td  id="btn"><input id="subbtn" type="submit" value="Check" name="Submit"></td>
+    </tr>
+</table>         
+</form>   
+<p id="result"></p>
 </body> 
 </html>
diff --git a/style.css b/style.css
@@ -4,26 +4,40 @@ div {
     width: 100%; 
     border: 100px solid black; 
 } 
-
-form {                                         
-    margin: 0 auto; 
-    width: 600px;
-    text-align: center;
-    border: 1px Solid black;
-    background-color: aliceblue;
+body{
+    background-color: rgb(175, 165, 165);
 }
-
-form>p{
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-
+p{
+    color: green;
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
 }
 input{
-    width: 300px;
+    width: 350px;
     margin-left: 2%;
     float: inline-end;
+    outline:none;
 }
 .alert{
-    color: red;
-}
+
+    color: orangered;
+    font-weight: 900;
+}
+#subbtn{
+    width: 60px;
+    background-color: orangered;
+    border: 1px solid black;
+    color: white;
+    padding: 5px;
+    cursor:  pointer;
+}
+
+table{
+    width: 100%;
+    border-spacing: 0 25px;
+}
+td{
+    padding: 10px;
+    text-align: center;
+}