Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
width: 100%;
.tutorial-wrapper form{
background-color: #ffc;
border: 1px solid #cc9;
padding: 10px;
font-family: verdana;
width: 75%;
font-size: 1em;
margin: 2px 0 2px 0;
padding: 0;
.tutorial-wrapper label{
float: left;
text-align: right;
margin: 0 5px 0 0;
width: 30%;
.tutorial-wrapper input{
width: 200px;
border: 1px solid #cc9;
margin: 0;
padding: 0;
font-size: .8em;
<script type="text/javascript">
function checkPass()
//Store the password field objects into variables ...
var password = document.getElementById('password2');
var confirm = document.getElementById('confirm2');
//Store the Confirmation Message Object ...
var message = document.getElementById('confirm-message2');
//Set the colors we will be using ...
var good_color = "#66cc66";
var bad_color = "#ff6666";
//Compare the values in the password field
//and the confirmation field
if(password.value == confirm.value){
//The passwords match.
//Set the color to the good color and inform
//the user that they have entered the correct password = good_color; = good_color;
message.innerHTML = '<img src="/wp-content/uploads/2019/04/tick.png" alt="Passwords Match!">';
//The passwords do not match.
//Set the color to the bad color and
//notify the user. = bad_color; = bad_color;
message.innerHTML = '<img src="/wp-content/uploads/2019/04/publish_x.png" alt="Passwords Do Not Match!">';
<div class="tutorial-wrapper">
<div class="field-wrapper">
<label for="password2">Password:</label>
<input type="password" name="password" id="password2" onkeyup="checkPass();">
<div class="field-wrapper">
<label for="confirm2">Confirm Password:</label>
<input type="password" name="confirm" id="confirm2" onkeyup="checkPass();">
<span id="confirm-message2" class="confirm-message"></span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment