Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<style>
.tutorial-wrapper{
width: 100%;
}
.tutorial-wrapper form{
background-color: #ffc;
border: 1px solid #cc9;
padding: 10px;
font-family: verdana;
width: 75%;
font-size: 1em;
}
.field-wrapper{
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;
}
.confirm-message{
margin: 0;
padding: 0;
font-size: .8em;
}
</style>
<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
confirm.style.backgroundColor = good_color;
message.style.color = good_color;
message.innerHTML = '<img src="/wp-content/uploads/2019/04/tick.png" alt="Passwords Match!">';
}else{
//The passwords do not match.
//Set the color to the bad color and
//notify the user.
confirm.style.backgroundColor = bad_color;
message.style.color = bad_color;
message.innerHTML = '<img src="/wp-content/uploads/2019/04/publish_x.png" alt="Passwords Do Not Match!">';
}
}
</script>
<div class="tutorial-wrapper">
<form>
<div class="field-wrapper">
<label for="password2">Password:</label>
<input type="password" name="password" id="password2" onkeyup="checkPass();">
</div>
<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>
</div>
</form>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.