Home About Contact

Projects

Create Messenger Pop Up ChatBox Type Writer ChatGpt Basic Copy Text Using Tolltip Digital Clock CountDown Timer Create StopWatch FB login from Tab Button Accordion Auto Image Gallery DropDown Menu Modal Box Modal Image Box Scroll Indicator To Do List Autocomplete Remember Search History Toggle Switch Calender Layout Dynamic Calender Alarm Set Password Validation Password Generator Age Calculator Multi Step Form Weather API

Password Validation🔑

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here
  • RegExp in JS
  • string match method in JS
  • Toogle classList
  • position property in CSS

Password validation is the process of checking wheather a user's password meets certain predefined security criteria before it is accepted for use.The goal of passoword validation is to ensure that passwords are strong enough to protect user accounts from unauthorized access and are not easily guessable or vulunerable to common attacks, such as brute forces or dicionary attacks.

Password Validation Form

A lowerCase letter

A upperCase letter

At least One digit

Minimum 8 lenght

HTML


<div class="showcontent">
 
    <div class="validation">
        <h2 style="text-align: center;">Password Validation Form</h2>
        
        <form action="">
            <fieldset>
                <label for="uname">Username: </label>
                <input type="text" name="uname" id="unam" required autocomplete="off">

                <label for="psw">Password: </label>
                <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Password should have one digit, one lowerCase, one upperCase letter & minimum length 8." required  autocomplete="off">

                <input type="submit" value="Submit">
            </fieldset>
            
            <div class="message">
                <p class="invalid" id="lower">A <b>lowerCase </b>letter</p>
                <p class="invalid" id="upper">A <b>upperCase </b>letter</p>
                <p class="invalid" id="digit">At least <b>One </b>digit</p>
                <p class="invalid" id="length">Minimum <b>8 </b>lenght</p>
            </div>
        </form>
    </div>
</div>

JavaScript


let myInput=document.getElementById("psw");
let lower=document.getElementById("lower");
let upper=document.getElementById("upper");
let number=document.getElementById("digit");
let length=document.getElementById("length");   
let msg=document.querySelector(".message");

myInput.onblur=function(){
    msg.style.display='none';
}

myInput.onfocus=function(){
    msg.style.display="block";
}

myInput.onkeyup=function(){
    var lowerCaseletter=/[a-z]/g;
    ///console.log(myInput.value.match(lowerCaseletter));
    if(myInput.value.match(lowerCaseletter)){
        lower.classList.add("valid");
        lower.classList.remove("invalid");
    }
    else{
        lower.classList.add("invalid");
        lower.classList.remove("valid");
    }


    var upperCaseletter=/[A-Z]/g;
    if(myInput.value.match(upperCaseletter)){
        upper.classList.add("valid");
        upper.classList.remove("invalid");
    }
    else{
        upper.classList.add("invalid");
        upper.classList.remove("valid");
    }


    var digit=/[0-9]/g;
    
    if(myInput.value.match(digit)){
        number.classList.add("valid");
        number.classList.remove("invalid");
    }
    else{
        number.classList.add("invalid");
        number.classList.remove("valid");
    }


    if(myInput.value.length>=8){
        length.classList.add("valid");
        length.classList.remove("invalid");
    }
    else{
        length.classList.add("invalid");
        length.classList.remove("valid");
    }
}

CSS


.col-75 .showcontent{
    background-color: rgba(255, 255, 255, 0.687);
}
.validation{
    max-width:500px;
    background-color:white;
    margin: auto;
    position: relative;
    padding: 8px;
    padding-left: 15px;

}

.showcontent label{
    display: block;
    font-weight: bold;
    font-size: 20px;
}
.showcontent input[type=text],.showcontent input[type=password]{
    width: 100%;
    margin-bottom: 5px;
    padding: 8px 13px;
    border: 1px solid #aaa;
}
.showcontent input[type=submit]{
    background-color: #04aa6a;
    border: none;
    cursor: pointer;
    color: white;
    padding: 8px 16px;
    font-size: 20px;
    border-radius: 10px;
}
.message{
    position: relative;
    display: block;
    padding-left: 10px;
    
    
}
.invalid::before{
    content: "x";
    position: absolute;
    left: 3px;
    

}
.invalid{
    color: red;
    padding-left: 10px;
}
.valid::before{
    content:"✔";
    position: absolute;
    left: 3px;
}
.valid{
    padding-left: 10px;
    color: green;
}

Application🌐

Dark Mode Toggle

Example: The dark mode toggle in setting on Twitter or Facebook

Wi-Fi or Bluetooth Settings

Example: The Wi-Fi and Bluetooth toggles in the quick setting menu on Android or iOS devices.

Notifications Settings

Example: In the settings of a messaging app, you might have a toggle switch to enable or disable notifications for new messages.

new Date()

  • Returns a Date object with the current date and time based on the system's clock.
  • This create a date object represent the current date and time.

toString()

  • The toString() method converts any data type into a string. Syntax: varname.toString(),

padStart()

  • It is used to JS to pad the current string with another string untill the resulting string reaches the given length.
    Example: str.padStart(len,char or string);

setInterval()

  • This method in JS repeatedly calls a function or executes a code with a fixed time delay between each call.

setTimeout()

  • This method is used to execute a function or code snippet after a specified delay in milliseconds.

date.get....()

  • getDate(): Returns the day of the month(1-31)
  • getMonth(): Returns the month(0-11)
  • getFullYear(): Returns the year(4 digit year)
  • getDay(): Returns the day of the week(0-6)
  • getHours(): Returns the hours(0-23)
  • getMinutes(): Returns the minites(0-59)
  • getSeconds(): Returns the seconds(0-59)
  • getMilliseconds(): Returns the milliseconds(0-999)
  • getTime(): Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC