Create a password Validation Form

-

Password Validation Code below here..


Step-1:- Create a  HTML Page .


1- index.html



Step-2:- Write the Code of (Index.html) Page.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3>Password Validation</h3>
<p>Try to submit the form.</p>
<div class="container">
  <form action="#">
    <label for="usrname">Username</label>
    <input type="text" id="usrname" name="usrname" required>
    <label for="psw">Password</label>
    <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
    <input type="submit" value="Submit">
  </form>
</div>
<div id="message">
  <h3>Password must contain the following:</h3>
  <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
  <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
  <p id="number" class="invalid">A <b>number</b></p>
  <p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}
myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}
myInput.onkeyup = function() {
  var lowerCaseLetters = /[a-z]/g;
  if(myInput.value.match(lowerCaseLetters)) {  
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
  }
  var upperCaseLetters = /[A-Z]/g;
  if(myInput.value.match(upperCaseLetters)) {  
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }
  var numbers = /[0-9]/g;
  if(myInput.value.match(numbers)) {  
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }
  if(myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}
</script>
</body>
</html>



Step-3:- And Now the time of CSS Page.

Create a  CSS Page....


1- style.css


Step-4:- Write the Code of (style.css) Page.


input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}
input[type=submit] {
  background-color: #4CAF50;
  color: white;
}
.container {
  background-color: #f1f1f1;
  padding: 20px;
}
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 20px;
  margin-top: 10px;
}
#message p {
  padding: 10px 35px;
  font-size: 18px;
}
.valid {
  color: green;
}
.valid:before {
  position: relative;
  left: -35px;
  content: "✔";
}
.invalid {
  color: red;
}
.invalid:before {
  position: relative;
  left: -35px;
  content: "✖";
}



Thanks





Comments

Post a Comment

Popular posts from this blog

How to Create a Login With Signup form in php

-
Image
Code of the Login & Signup Form in php. Login & Signup form is must for websites.  Check Code Below Here.. Important Note:-  If you want run this code. First of all you need to create a mysql database and Table.  Create a database called (registration). In the registration database, add a table called (users).  The users table will take the following four fields. 1- id  - int(11)  autoincrement   primary key 2- username  -  varchar(100)    collation(latin1_swedish)_ci 3- email  -  varchar(100) 4- password  -  varchar(100) Step:1:- Create a 5 php pages... 1- index.php 2- errors.php 3- login.php 4- register.php 5- server.php Step:2:- Write the Code of (index.php) page. <?php    session_start();    if (!isset($_SESSION['username'])) {     $_SESSION['msg'] = "You must log in first";     header('location: login.php');   }   if (isset($_GET['lo
Read more

Code of the filter Drop-down Menu.

-
Image
Drop-Down Code below here.. Step-1:-   Create a  HTML Page . 1 - index.html Step-2:-  Write the Code of (Index.html) Page. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Search/Filter Dropdown</h2> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> <a href="#about">About</a> <a href="#base">Base</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a>
Read more

Create a Responsive mega Drop Down.

-
Image
Mega Dropdown Code below here.. Step-1 :-   Create a  HTML Page . 1-  index.html Step-2:-  Write the Code of (Index.html) Page. <!DOCTYPE html> <html lang="en">   <head>     <title>SmartMenus jQuery Website Menu - jQuery Plugin</title>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">         <link href="demo.css" rel="stylesheet" type="text/css" />   </head>   <body>     <nav id="main-nav">       <ul id="main-menu" class="sm sm-blue" >         <li><a href="#">Home</a></li>         <li><a href="#">About</a>           <ul>             <li><a href="#">Introduction to SmartMenus jQuery</a></li>      
Read more