Add Form Validation using javascript

kokonior · Oct 21, 2022 · ab08127 · ab08127
1 parent 812bfcd
commit ab08127
Show file tree

Hide file tree

Showing 3 changed files with 370 additions and 0 deletions.
diff --git a/form-validation2/index.html b/form-validation2/index.html
@@ -0,0 +1,97 @@
+<!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" />
+
+    <!-- stylesheet -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+    <title>Form-validtion</title>
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="header">
+        <h2>REGISTRATION FORM</h2>
+      </div>
+      <form action="" class="form" id="form">
+        <div class="form-control">
+          <label for="">Username</label>
+          <input
+            type="text"
+            name=""
+            id="uname"
+            placeholder="Enter your full name"
+            autocomplete="off"
+          />
+          <i class="bi bi-check-circle-fill"></i>
+          <i class="bi bi-exclamation-circle-fill"></i>
+          <small>Error msg</small>
+        </div>
+        <div class="form-control">
+          <label for="">Email</label>
+          <input
+            type="email"
+            name=""
+            id="email"
+            placeholder="Enter your email"
+            autocomplete="off"
+          />
+          <i class="bi bi-check-circle-fill"></i>
+          <i class="bi bi-exclamation-circle-fill"></i>
+          <small>Error msg</small>
+        </div>
+        <div class="form-control">
+          <label for="">Phone Number</label>
+          <input
+            type="number"
+            name=""
+            id="number"
+            placeholder="Enter your Phone number"
+            autocomplete="off"
+          />
+          <i class="bi bi-check-circle-fill"></i>
+          <i class="bi bi-exclamation-circle-fill"></i>
+          <small>Error msg</small>
+        </div>
+        <div class="form-control">
+          <label for="">Password</label>
+          <input
+            type="password"
+            name=""
+            id="password"
+            placeholder="Enter your password"
+            autocomplete="off"
+          />
+          <i class="bi bi-check-circle-fill"></i>
+          <i class="bi bi-exclamation-circle-fill"></i>
+          <small>Error msg</small>
+        </div>
+        <div class="form-control">
+          <label for="">Confirm Password</label>
+          <input
+            type="password"
+            name=""
+            id="cpassword"
+            placeholder="Enter your password again"
+            autocomplete="0ff"
+          />
+          <i class="bi bi-check-circle-fill"></i>
+          <i class="bi bi-exclamation-circle-fill"></i>
+          <small>Error msg</small>
+        </div>
+        <input type="submit" value="Submit" class="btn" />
+      </form>
+    </div>
+
+    <!-- js -->
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/form-validation2/script.js b/form-validation2/script.js
@@ -0,0 +1,123 @@
+
+const form= document.getElementById("form");
+const uname= document.getElementById("uname");
+const email= document.getElementById("email");
+const number= document.getElementById("number");
+const password= document.getElementById("password");
+const cpassword= document.getElementById("cpassword");
+
+//add event
+
+form.addEventListener('submit', (event) =>{
+    event.preventDefault();
+
+    validate();
+})
+
+const sendData =(unameVal ,sRate, count) =>{
+    if(sRate === count){
+        alert('registration done successfully');
+        swal("Welcome!" + unameVal, "Registration Successful", "success");
+        // location.href ='name of page'
+    }
+}
+
+const successMsg = (unameVal) =>{
+    let formCon = document.getElementsByClassName("form-control");
+    var count =formCon.length-1;
+    for(var i = 0; i<formCon.length; i++){
+        if(formCon[i].className ==='form-control success'){
+            var sRate = 0 + i;
+            console.log(sRate);
+            sendData(unameVal,sRate, count);
+        }
+        else{
+            return false;
+        }
+    }
+}
+
+const isEmail = (emailVal) => {
+    var atSymbole = emailVal.indexOf('a');
+    if(atSymbole < 1)return false;
+    var dot = emailVal.lastIndexOf('.');
+    if(dot < atSymbole + 2)return false;
+    if(dot ===emailVal.length-1) return false;
+    return true;
+}
+
+//define the validation function
+
+const validate = ()=>{
+    const unameVal= uname.value.trim();
+const emailVal= email.value.trim();
+const numberVal= number.value.trim();
+const passwordVal= password.value.trim();
+const cpasswordVal= cpassword.value.trim();
+
+
+// validate username
+if(unameVal === ""){
+    setErrorMsg(uname, "username can not be blank");
+}
+else if(unameVal.length<2){
+    setErrorMsg(uname, "username min 3 char");
+}
+else{
+    setSucessMsg(uname);
+}
+//validate email
+if(emailVal === ""){
+    setErrorMsg(email, "email can not be blank");
+}
+else if(!isEmail(emailVal)){
+    setErrorMsg(emailVal, "Not a valid Email");
+}
+else{
+    setSucessMsg(email);
+}
+//validate number
+if(numberVal === ""){
+    setErrorMsg(number, "Number can not be blank");
+}
+else if(numberVal.length != 10){
+    setErrorMsg(number, "Not a valid Number");
+}
+else{
+    setSucessMsg(number);
+}
+//validate password
+if(passwordVal === ""){
+    setErrorMsg(password, "Password can not be null");
+}
+else if(passwordVal.length <= 5){
+    setErrorMsg(password, "Minimum 6 char required ");
+}
+else{
+    setSucessMsg(password);
+}
+//validate confirm password
+if(cpasswordVal === ""){
+    setErrorMsg(cpassword, "confirm Password can not be null");
+}
+else if(passwordVal != cpasswordVal){
+    setErrorMsg(cpassword, "Password not match ");
+}
+else{
+    setSucessMsg(cpassword);
+}
+
+
+successMsg(unameVal);
+}
+
+function setErrorMsg(input, errormsgs){
+    const formControl = input.parentElement;
+    const small = formControl.querySelector('small');
+    formControl.className = "form-control error";
+    small.innerText = errormsgs;
+}
+function setSucessMsg(input ){
+    const formControl = input.parentElement;
+    formControl.className = "form-control success";
+}
diff --git a/form-validation2/style.css b/form-validation2/style.css
@@ -0,0 +1,150 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Ubuntu:wght@300&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --my-font: 'Ubuntu', sans-serif;
+    --lg-color: linear-gradient(to left, #74ebd5, #9face6);
+    --light-color: linear-gradient(to right, rgb(76, 216, 190), rgba(131, 185, 231, 0.7));
+
+}
+
+body {
+    background-image: var(--light-color) ;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    font-family: var(--my-font);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    width: 100vw;
+}
+
+.container {
+    background-color: #fff;
+    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0.048);
+    overflow: hidden;
+    -webkit-border-radius: 10px;
+    width: calc(100vw-65vw);
+    max-width: 100%;
+    border-radius: 10px;
+
+}
+
+.bi{
+    font-size: 1.3rem;
+    margin: 6px;
+}
+
+.form {
+
+    padding: 40px;
+}
+
+.form-control {
+    margin-bottom: 20px;
+    padding: 10px;
+    position: relative;
+}
+
+.form-control label {
+    display: inline-table;
+    margin-bottom: 5px;
+}
+
+.form-control input {
+    width: 100%;
+    border: 2px solid #f0f0f0;
+    border-radius: 5px;
+    display: inline-block;
+    padding: 12px;
+}
+
+.form-control input:focus {
+    outline: 0;
+    border-color: #777;
+}
+
+.form-control.success input {
+    border-color: #06612c;
+}
+
+.form-control.error input {
+    border-color: #e74c3c;
+}
+
+.form-control i {
+    position: absolute;
+    right: 12px;
+    top: 38px;
+    visibility: hidden;
+}
+
+.form-control.success i.bi-check-circle-fill {
+    color: #06612c;
+    visibility: visible;
+}
+
+.form-control.error i.bi-exclamation-circle-fill {
+    color: #e74c3c;
+    visibility: visible;
+}
+
+.form-control small {
+    visibility: hidden;
+    position: absolute;
+   margin-bottom: 30px;
+    left: 0;
+    color: rgb(243, 92, 117);
+}
+
+.form-control.error small{
+    visibility: visible;
+    margin-top: 48px;
+    margin-left: 15px;
+}
+
+.header {
+    background-image: var(--lg-color);
+    padding: 15px;
+
+}
+
+.header h1 {
+    color: #222;
+    text-transform: uppercase;
+    text-align: center;
+    font-size: 25px;
+}
+
+.form .btn {
+    background: var(--lg-color);
+    border-radius: none;
+    outline: none;
+    display: block;
+    font: 15px;
+    padding: 15px;
+    margin-top: 20px;
+    width: 100%;
+    font-weight: bold;
+    text-transform: uppercase;
+    transition: all 1s ease;
+
+}
+
+.form .btn:hover {
+    background: linear-gradient(to right, #74ebd5, #9face6);
+}
+
+@media(max-width:998px){
+    .container
+    {
+        width: calc(100vw-35vw);
+        max-width: 100%;
+    }
+}