Advertisement
Guest User

Untitled

a guest
Apr 24th, 2019
405
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.42 KB | None | 0 0
  1. <style>
  2. .tutorial-wrapper{
  3. width: 100%;
  4. }
  5. .tutorial-wrapper form{
  6. background-color: #ffc;
  7. border: 1px solid #cc9;
  8. padding: 10px;
  9. font-family: verdana;
  10. width: 75%;
  11. font-size: 1em;
  12. }
  13. .field-wrapper{
  14. margin: 2px 0 2px 0;
  15. padding: 0;
  16. }
  17. .tutorial-wrapper label{
  18. float: left;
  19. text-align: right;
  20. margin: 0 5px 0 0;
  21. width: 30%;
  22. }
  23. .tutorial-wrapper input{
  24. width: 200px;
  25. border: 1px solid #cc9;
  26. }
  27. .confirm-message{
  28. margin: 0;
  29. padding: 0;
  30. font-size: .8em;
  31. }
  32. </style>
  33. <script type="text/javascript">
  34. function checkPass()
  35. {
  36. //Store the password field objects into variables ...
  37. var password = document.getElementById('password2');
  38. var confirm = document.getElementById('confirm2');
  39. //Store the Confirmation Message Object ...
  40. var message = document.getElementById('confirm-message2');
  41. //Set the colors we will be using ...
  42. var good_color = "#66cc66";
  43. var bad_color = "#ff6666";
  44. //Compare the values in the password field
  45. //and the confirmation field
  46. if(password.value == confirm.value){
  47. //The passwords match.
  48. //Set the color to the good color and inform
  49. //the user that they have entered the correct password
  50. confirm.style.backgroundColor = good_color;
  51. message.style.color = good_color;
  52. message.innerHTML = '<img src="/wp-content/uploads/2019/04/tick.png" alt="Passwords Match!">';
  53. }else{
  54. //The passwords do not match.
  55. //Set the color to the bad color and
  56. //notify the user.
  57. confirm.style.backgroundColor = bad_color;
  58. message.style.color = bad_color;
  59. message.innerHTML = '<img src="/wp-content/uploads/2019/04/publish_x.png" alt="Passwords Do Not Match!">';
  60. }
  61. }
  62. </script>
  63. <div class="tutorial-wrapper">
  64. <form>
  65. <div class="field-wrapper">
  66. <label for="password2">Password:</label>
  67. <input type="password" name="password" id="password2" onkeyup="checkPass();">
  68. </div>
  69. <div class="field-wrapper">
  70. <label for="confirm2">Confirm Password:</label>
  71. <input type="password" name="confirm" id="confirm2" onkeyup="checkPass();">
  72. <span id="confirm-message2" class="confirm-message"></span>
  73. </div>
  74. </form>
  75. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement