Welcome back to shortlearner.com, in this post we will see how can we check the insert password is correct before signup with the help of JavaScript function.Most of times the user forgets the password during signup,using this system we will ensure to the user that the password entered by him/her is correct or not.In this system we will create two text boxes.
The values of the Password and Confirm Password Text Boxes are compared using JavaScript and if the values do not match an error message is displayed in red color inside the text box,and if the values are matched the text box color will appear in green color.
Also Read :
PHP Login Script With Remember me.
Change password using javascript, php and mysqli.
Password and Confirm Password Validation Using JavaScript
Check Email is Already Registered in Database using Ajax and JavaScript.
How to hide extension of html and php file.?
In the below example we will use the JavaScript onkeyup function, that can check what the user has entered in both fields and confirm that they have typed the same thing twice and visually confirm to the user that there is no problem with his/her password.put this below JavaScript inside the <body> section of your html page.
<script type="text/javascript"> function checkPass() { //Store the password field objects into variables ... var pass1 = document.getElementById('pass1'); var pass2 = document.getElementById('pass2'); //Store the Confimation Message Object ... var message = document.getElementById('confirmMessage'); //Set the colors we will be using ... var goodColor = "#66cc66"; var badColor = "#ff6666"; //Compare the values in the password field //and the confirmation field if(pass1.value == pass2.value){ //The passwords match. //Set the color to the good color and inform //the user that they have entered the correct password pass2.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "Passwords Match!" }else{ //The passwords do not match. //Set the color to the bad color and //notify the user. pass2.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = "Passwords Do Not Match!" } } </script>
index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Password Match Using javascript</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> .heading { border-bottom: 1px solid #fcab0e; padding-bottom: 9px; position: relative; } .form-gap { padding-top: 70px; } </style> </head> <body> <div> <div> <div> <div> <div>Sign Up</div> <div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()" style="color: white;">Sign In</a></div> </div> <div > <h3><strong>Account</strong> Signup <span></span></h3> <form method="POST" action="signup.php"> <div> <label for="email">Email *</label> <input id="email" placeholder="Enter Email Address " name="email" type="text" data-validation="email"> </div> <div> <label for="email">Password *</label> <input id="pass1" placeholder="Enter Password " name="password" type="password" data-validation="password"> </div> <div> <label for="email">Confirm Password *</label> <span id="confirmMessage"></span> <input placeholder="Enter Password " name="password" type="password" data-validation="password" id="pass2" onkeyup="checkPass(); return false;"> </div> <div> <input type="submit" name="signup" value="SIGNUP"> </div> </form> </div> </div> </div> </div> </div> </body> </html>
Thank you for any other great post. The place else may anyone get that kind
of info in such a perfect way of writing? I’ve a presentation next week, and I’m at the search for such info.
[url=https://synteroid.com/]generic for synthroid[/url]
I do accept as true with all of the ideas you’ve offered
for your post. They’re very convincing and can definitely work.
Still, the posts are very quick for newbies. May you please extend them a little from subsequent time?
Thanks for the post.
massive big tits
“We’ve had a decade where girls were underemplloyed relative to males,” says
Mathur.
Review my website: 유흥알바
Wow, that’s what I was exploring for, what a data! existing here at this webpage, thanks admin of
this web site.
Excellent article! We are linking to this particularly great content on our website.
Keep up the good writing.
[url=http://amoxicillinhct.online/]augmentin 1000 mg online usa[/url]
online casino for real money no deposit casino real money casino
sign up bonus no deposit mobile casino online
Hello, i think that i saw you visited my blog so i came to “return the favor”.I am trying to
find things to enhance my site!I suppose its ok to use a few of your ideas!!
I read this post fully on the topic of the resemblance of most up-to-date
and preceding technologies, it’s remarkable article.
Alsoo visit my web site – Funny animal
I like everything what is said and I support it a lot. I am glad to be here and to share my opinion.
This site I like too:
[url=https://freesexdb.com/]סרטי סקס לצפייה ישירה[/url]
I enjoy reading it a lot that is why I decided to write a comment and give compliments, well done!
I also often visit this
[url=https://www.ladyescort.co.il/]ליידי אסקורט[/url]
I like this point of view as it has a lot of sense!
[url=https://55girl.com/%d7%a0%d7%a2%d7%a8%d7%95%d7%aa-%d7%9c%d7%99%d7%95%d7%95%d7%99-%d7%91%d7%96%d7%9b%d7%a8%d7%95%d7%9f-%d7%99%d7%a2%d7%a7%d7%91/]נערות ליווי בזכרון יעקב[/url]
my discount pharmacy: medicine from canada with no prescriptions – best 10 online canadian pharmacies
http://fastdeliverypill.com/# best canadian online pharmacy reviews
When I opened this website I could not imagine that it is so informative.
[url=https://55girl.com/%d7%a0%d7%a2%d7%a8%d7%95%d7%aa-%d7%9c%d7%99%d7%95%d7%95%d7%99-%d7%91%d7%94%d7%95%d7%93-%d7%94%d7%a9%d7%a8%d7%95%d7%9f/]נערות ליווי בהוד השרון[/url]
Great beat ! I would like to apprentice while you amend your website, how could
i subscribe for a blog website? The account aided me a acceptable deal.
I had been tiny bit acquainted of this your broadcast provided bright
clear concept
I like everything in here and I visit this site every day.
[url=https://55girl.com/%d7%a0%d7%a2%d7%a8%d7%95%d7%aa-%d7%9c%d7%99%d7%95%d7%95%d7%99-%d7%91%d7%98%d7%91%d7%a8%d7%99%d7%94/]נערות ליווי בטבריה[/url]
Do not stop doing what you do, it is simply perfect.
[url=https://55girl.com/]נערות ליווי[/url]
I’m curious to find out what blog platform
you’re utilizing? I’m experiencing some minor security problems with my latest site and I
would like to find something more secure. Do you have any solutions?
I really like your blog.. very nice colors & theme. Did you make this website yourself or did you hire
someone to do it for you? Plz reply as I’m looking to construct my own blog and would
like to find out where u got this from. many thanks
Thanks for finally writing about > Password Validation Using
JavaScript | ShortLearner Buy Saxenda
Do not stop doing what you do, it is simply perfect.
[url=https://55girl.com/נערות-ליווי-באילת/]נערות ליווי באילת[/url]