Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement