confirm password validation example in html5
In this article, we will tell you how to make confirm password validation in html5. when we creating the registration page at that time we need to confirm password validation. because visitors cannot enter an incorrect password when registering.
let’s we will create a simple registration form. just we will take some fields like email, password, and confirm password. we will use javascript and check the two filed value that is equal or not. if is it false then we will return the error message.
So you can check below following example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>User Register</h2> <form> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" required /> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" required /> </div> <div class="form-group"> <label for="cpwd">Cofirm Password:</label> <input type="password" class="form-control" id="cpwd" placeholder="Enter Confirm password" name="cpwd" required /> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <script> var password = document.getElementById("pwd"); var confirm_password = document.getElementById("cpwd"); function validatePassword(){ if(password.value != confirm_password.value) { confirm_password.setCustomValidity("Passwords Don't Match"); } else { confirm_password.setCustomValidity(''); } } password.onchange = validatePassword; confirm_password.onkeyup = validatePassword; </script> </body> </html> |
Please follow and like us:
