12/11/2019 How To Create a Password Validation Form

  HTML CSS MORE   

w3schools.com

How TO - Password Validation

❮ Previous Next ❯

Learn how to create a password validation form with CSS and JavaScript.

Password Validation

Try it Yourself »

https://www.w3schools.com/howto/howto_js_password_validation.asp 1/8
12/11/2019 How To Create a Password Validation Form

Create A Password
 HTML CSS MOREValidation
 Form  

Step 1) Add HTML:

Example
<div class="container">
<form action="/action_page.php">
<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>

Note: We use the pattern attribute (with a regular expression) inside the password
field to set a restriction for submitting the form: it must contain 8 or more characters
that are of at least one number, and one uppercase and lowercase letter.

Step 2) Add CSS:

Style the input fields and the message box:

Example

https://www.w3schools.com/howto/howto_js_password_validation.asp 2/8
12/11/2019 How To Create a Password Validation Form

 /* 
Style HTML
all input CSS
fields MORE
*/   
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}

/* Style the submit button */

input[type=submit] {
background-color: #4CAF50;
color: white;
}

/* Style the container for inputs */

.container {
background-color: #f1f1f1;
padding: 20px;
}

/* The message box is shown when the user clicks on the password field */
#message {
display:none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}

#message p {
padding: 10px 35px;
font-size: 18px;
}

/* Add a green text color and a checkmark when the requirements are right
*/
.valid {
color: green;
}

.valid:before {
position: relative;
left: -35px;
https://www.w3schools.com/howto/howto_js_password_validation.asp 3/8
12/11/2019 How To Create a Password Validation Form

content: "&#10004;";
  HTML CSS MORE   
}

/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid {
color: red;
}

.invalid:before {
position: relative;
left: -35px;
content: "&#10006;";
}

Step 3) Add JavaScript:

Example

<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");

// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}

// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
document.getElementById("message").style.display = "none";
}

// When the user starts to type something inside the password field
myInput.onkeyup = function() {
// Validate lowercase letters
var lowerCaseLetters = /[a-z]/g;
if(myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
} else {
https://www.w3schools.com/howto/howto_js_password_validation.asp 4/8
12/11/2019 How To Create a Password Validation Form

letter.classList.remove("valid");
 HTML CSS MORE 
letter.classList.add("invalid");  
}

// Validate capital letters

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");
}

// Validate numbers
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");
}

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

Try it Yourself »

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

❮ Previous Next ❯

https://www.w3schools.com/howto/howto_js_password_validation.asp 5/8
12/11/2019 How To Create a Password Validation Form

  HTML CSS MORE   

COLOR PICKER

HOW TO

Tabs
Dropdowns
Accordions
Side Navigation
Top Navigation
Modal Boxes
Progress Bars
Parallax
Login Form
HTML Includes
Google Maps
Range Sliders
Tooltips
Slideshow
Filter List
Sort List

SHARE

 


CERTIFICATES

HTML
CSS
JavaScript
SQL
Python
PHP
jQuery

https://www.w3schools.com/howto/howto_js_password_validation.asp 6/8
12/11/2019 How To Create a Password Validation Form

Bootstrap
  HTML CSS MORE   
XML

Read More »

REPORT ERROR

PRINT PAGE

FORUM

ABOUT

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
jQuery Tutorial
Java Tutorial
C++ Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
jQuery Reference
Java Reference
Angular Reference

Top Examples
HTML Examples
CSS Examples
JavaScript Examples
https://www.w3schools.com/howto/howto_js_password_validation.asp 7/8
12/11/2019 How To Create a Password Validation Form

How To Examples
  HTML CSS MORE 
SQL Examples  
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
jQuery Examples
Java Examples
XML Examples

Web Certificates
HTML Certificate
CSS Certificate
JavaScript Certificate
SQL Certificate
Python Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate

Get Certified »

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading
and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but
we cannot warrant full correctness of all content. While using this site, you agree to have read and
accepted our terms of use, cookie and privacy policy. Copyright 1999-2019 by Refsnes Data. All Rights
Reserved.
Powered by W3.CSS.

https://www.w3schools.com/howto/howto_js_password_validation.asp 8/8