I wrote some validation code for a password and confirm password that checks if they match or not. Furthermore there is a condition that checks if length of my password is less than 6 characters and writes/displays an error if they are less than 6 characters. But my code doesn't work correctly: when I switch to field 2 the condition of field 1 isn't checked and if both of conditions are correct the error still presents.
Here is my code:
function checkPass() { var pass1 = document.getElementById('pass1'); var pass2 = document.getElementById('pass2'); var message = document.getElementById('error-nwl'); var goodColor = "#66cc66"; var badColor = "#ff6666"; if(pass1.value == pass2.value){ pass2.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "ok!" } else{ pass2.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " These passwords don't match" } if(pass1.length > 5){ pass1.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "character number ok!" } else{ pass1.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " you have to enter at least 6 digit!" } } <input name="password" type="password" placeholder="password" id="pass1"/> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" /> <div id="error-nwl"></div> 22 Answers
Answers 1
Try this:
if(pass1.value.length > 5) Answers 2
before:
if(pass1.length > 5) after:
if(pass1.value.length > 5) and you should check equality after everything fits, like length or allowed chars etc.
function checkPass() { var pass1 = document.getElementById('pass1'); var pass2 = document.getElementById('pass2'); var message = document.getElementById('error-nwl'); var goodColor = "#66cc66"; var badColor = "#ff6666"; if(pass1.value.length > 5 && pass2.value.length > 5) { pass1.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "character number ok!" if(pass1.value == pass2.value) { pass2.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "ok!" } else { pass2.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " These passwords don't match" } } else { pass1.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " you have to enter at least 6 digit!" } }<input name="password" type="password" placeholder="password" id="pass1"/> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" /> <div id="error-nwl"></div>Answers 3
if (pass1.value.length > 5) Make sure don't apply trim() because trim will remove blank spaces and blank space in the password is not a valid character.
Answers 4
To check length you should have to write like this
if (pass1.value.length > 5) and then your code working fine
Answers 5
When you are checking the length of the pass1, you are not actually checking it's value - pass1.length > 5 - you should change it to pass1.value.length > 5
Answers 6
You can do:
if (pass1.value.trim().length > 5) Answers 7
Use below code. Firstly, pass1.length is not correct. You should write pass1.value.length. Secondly, I added comparing the 2 blocks at the end, as firstly you should check the length of first block. Also, the function should be called on changes of first block also.
Good luck!
function checkPass() { var pass1 = document.getElementById('pass1'); var pass2 = document.getElementById('pass2'); var message = document.getElementById('error-nwl'); var goodColor = "#66cc66"; var badColor = "#ff6666"; if(pass1.value.length > 5) { pass1.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "character number ok!" } else { pass1.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " you have to enter at least 6 digit!" return; } if(pass1.value == pass2.value) { pass2.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "ok!" } else { pass2.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " These passwords don't match" } } <input name="password" type="password" placeholder="password" id="pass1" onkeyup="checkPass(); return false;" /> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" /> <div id="error-nwl"></div> Answers 8
function checkPass() { var pass1 = document.getElementById('pass1'); var pass2 = document.getElementById('pass2'); var message = document.getElementById('error-nwl'); var goodColor = "#66cc66"; var badColor = "#ff6666"; if(pass1.value == pass2.value){ pass2.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "ok!" } else{ pass2.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " These passwords don't match" } if(pass1.value.length > 5){ pass1.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "character number ok!" } else{ pass1.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " you have to enter at least 6 digit!" } } <input name="password" type="password" placeholder="password" id="pass1"/> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" /> <div id="error-nwl"></div>Answers 9
I'll start by adding comments on your code:
function checkPass() { var pass1 = document.getElementById('pass1'); var pass2 = document.getElementById('pass2'); var message = document.getElementById('error-nwl'); var goodColor = "#66cc66"; var badColor = "#ff6666"; // You start by checking if they match if(pass1.value == pass2.value){ pass2.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "ok!" }else{ pass2.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " These passwords don't match" } // And then that messages gets removed by the result of the length check // Also, pass1.length is undefined if(pass1.length > 5){ pass1.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "character number ok!" }else{ pass1.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " you have to enter at least 6 digit!" } } <input name="password" type="password" placeholder="password" id="pass1"/> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" /> <div id="error-nwl"></div> Instead you should pressume that the status is valid until verified otherwise:
function checkPass() { var pass1 = document.getElementById('pass1'); var pass2 = document.getElementById('pass2'); var message = document.getElementById('error-nwl'); var goodColor = "#66cc66"; var badColor = "#ff6666"; message.style.color = goodColor; message.innerHTML = "ok!" if(pass1.value == pass2.value){ pass2.style.backgroundColor = goodColor; }else{ pass2.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " These passwords don't match" } if(pass1.value.length > 5){ pass1.style.backgroundColor = goodColor; }else{ pass1.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " you have to enter at least 6 digit!" } } <input name="password" type="password" placeholder="password" id="pass1"/> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" /> <div id="error-nwl"></div> Beyond that, notice that if you make both fields match and then you edit the first one, the message doesn't go away. In fact, editing the first one will never make the message go away because we are still checking only on the second one. Instead you could check on both.
Also, using keyup maybe annoying and confusing, you may consider using onblur to validate when the user leaves the field (i.e. when the field loses focus, aka blurs).
If you want something fancier you could use the keyup method to erase the message while the user types, or even to check again but on a timer that you reset on each keystroke...
Or you can use HTML5 validation because why not?
I just updated my javascript library thoth to support minlength validation. Also published a helper library to ease form validaton with thoth - it may require some tweaks depending on the case, in particular it doesn't include any mechanism for localization.
Using thoth, you can implement your code as follows. Note: please download the libraries if you want to add them to your code.
Thoth will make sure this validation works in IE8 or newer, and if javascript is not available it will degrade to HTML5 form validation. Remember that the client can always manipulate Javascript and HTML code, so repeat your validations on the server.
.valid { color: #66cc66; } .invalid { color: #ff6666; }<!DOCTYPE html> <head> <title>Demo</title> <script src="https://rawgit.com/theraot/thoth/master/thoth.js"></script> <script src="https://rawgit.com/theraot/thoth/master/form_helper.js"></script> </head> <form data-on-valid="document.getElementById('ok').style.display='';" data-on-invalid="document.getElementById('ok').style.display='none';" data-lacking="you have to enter at least 6 digit!" data-lacking-class="invalid"> <input name="password" type="password" placeholder="password" id="pass1" minlength="6" required="required"/> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" minlength="6" data-validate="match(@#pass1)" required="required"/> </form> <div id="ok" class="valid" style="display:none">ok!</div>There are quite a few of data- attributes here, I'll break it down for you:
data-on-valid: the code that will run when the form validates correctly.data-on-invalid: the code that will run when the form doesn't validates.data-lacking: the string format to use when there are not enough characters. Similarlydata-remaininganddata-excesswill work when there is room before reachingmaxlengthand when the text excedsmaxlengthrespectively.data-lacking-class: the the css class to use for the lacking message, similarydata-remaining-classanddata-excess-classexist.
The above are added by the helper library form_helper.cs. From the library thoth only the following is used:
data-validate: additional validations. In this case it is used to add the validation to varify that both fields match.
Sorry for the lack of documentation.
Note: data-on-valid and data-on-invalid are not proper events.
Answers 10
Use Below Code
valid=pass1.value.search(/^[A-Za-z0-9@_]{6,20}$/); if(valid != 0){ message.innerHTML="Invalid Password."; }else if(pass1.value.length < 6){ message.innerHTML = " you have to enter at least 6 digit!" } Answers 11
Find the added comment for changes done as it it working fine now.
function checkPass() { var pass1 = document.getElementById('pass1'); var pass2 = document.getElementById('pass2'); var message = document.getElementById('error-nwl'); var goodColor = "#66cc66"; var badColor = "#ff6666"; if(pass1.value == pass2.value){ pass2.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "ok!" } else{ pass2.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " These passwords don't match" } if(pass1.value.length > 5){ ////////just added value here// pass1.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "character number ok!" } else{ pass1.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " you have to enter at least 6 digit!" } }<input name="password" type="password" placeholder="password" id="pass1"/> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" /> <div id="error-nwl"></div>Answers 12
if you're using jquery you can use this jQuery Validation plugin
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Makes "field" required to be the same as #other</title> <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css"> </head> <body> <form id="myform"> <label for="password">Password</label> <input id="password" name="password" /> <br/> <input type="submit" value="Validate!"> </form> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script> <script> // just for the demos, avoids form submit jQuery.validator.setDefaults({ debug: true, success: "valid" }); $( "#myform" ).validate({ rules: { password: { minlength: 6, maxlength: 25, required: true } } }); </script> </body> </html> Answers 13
Your issue is checking the length of a single DOM node, instead of the length of the DOM nodes value.
What you currently have is the equivalent of
var pass1 = document.getElementById('pass1'); if ( pass1.length > 5 ) {... A single DOM node only has a length of 1, if it's found, it could never be more than 5.
What you wanted was to check the length of the value
var pass1 = document.getElementById('pass1'); if ( pass1.value.length > 5 ) {... But you really want to do that when typing in in the first password field, not the second one.
Using proper event handlers, better checks, and classes for the messages, this would be the way to do it
var pass1 = document.getElementById('pass1'); var pass2 = document.getElementById('pass2'); var message = document.getElementById('error-nwl'); function msg(_msg, good, time) { message.innerHTML = _msg; message.classList.toggle('bad', !good); message.classList.add('visible'); setTimeout(function() {message.classList.remove('visible')}, time); } pass1.addEventListener('input', function() { this.classList.remove('bad'); this.classList.remove('good'); if (this.value.length > 5) { this.classList.add('good'); msg("Character number ok!", true, 1800); } }); pass1.addEventListener('blur', function() { if (this.value.length <= 5) { this.classList.remove('good'); this.classList.add('bad'); msg("You have to enter at least 6 digit!", false, 1800); } else if (pass1.value !== pass2.value) { pass2.classList.remove('good'); pass2.classList.add('bad'); msg("Passwords don't match", false, 3000); } }); pass2.addEventListener('input', function() { if (this.value.length > 5) { var matches = pass1.value === pass2.value; var _message = matches ? "Passwords match!" : "Passwords don't match"; pass2.classList.toggle('good', matches); pass2.classList.toggle('bad', !matches); msg(_message, matches, 3000); } else { message.classList.remove('visible'); this.classList.remove('good'); this.classList.remove('bad'); } }); pass2.addEventListener('blur', function() { var matches = pass1.value === pass2.value; if (!matches) { pass2.classList.remove('good'); pass2.classList.add('bad'); msg("Passwords don't match", matches, 3000); } });#pass1.bad, #pass2.bad { background: #ff6666; } #pass1.good, #pass2.good { background: #66cc66; } #error-nwl { opacity: 0; color: #66cc66; transition: opacity 0.3s ease-in-out; } #error-nwl.bad { color: #ff6666; } #error-nwl.visible { opacity: 1; }<input name="password" type="password" placeholder="password" id="pass1" /> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" /> <div id="error-nwl"></div>Answers 14
The apparently simple task of password validation can get complex, and it may be difficult to pinpoint why code fails to work as intended. A major part of the challenge lies in specifying the conditional logic, then to convert this logic to working code.
You want to achieve the following:
- Make the user enter a password of at least 6 characters length
- Make the user confirm the password
- Provide the user with relevant feedback assisting the user through the process
One way to convert this to conditional logic (in pseudocode) is as follows:
if (password length is less than 6) inform user that password should be at least 6 characters else if (passwords do not match) ask user to confirm password else inform user that passwords match, all is ok But my code doesn't work correctly: when I switch to field 2 the condition of field 1 isn't checked and if both of conditions are correct the error still presents.
Your code follows a different logic (in pseudocode):
if (passwords match) inform user that passwords match, all is ok else inform user that passwords do not match if (password is more than 5 characters) inform user that the password is long enough else inform user that the password should be at least 6 characters One problem in your code is that password length is the last thing you check, so the first if/else check is redundant (it will never produce any relevant feedback, even when the passwords match), since your code always will end up with providing feedback about password length.
Another problem is that your code would accept passwords that match even if they are less than 6 characters, that is why you want to check password length first, and afterwards check whether both passwords match.
In addition, your code only runs these checks when the user writes to field 2 ('#pass2'), you need to add an event handler to 'onkeyup' of field 1 as well.
Thus, your code logic needs to be rewritten. Here is one of several ways this could be done:
function checkPass() { var neutralColor = '#fff'; // 'white'; var badColor = '#f66'; // 'red'; var goodColor = '#6f6'; // 'green'; var password1 = getElm('pass1').value; var password2 = getElm('pass2').value; //if password length is less than 6 if (password1.length < 6) { feedback('Enter a password of at least 6 characters'); //we do not care about pass2 when pass1 is too short setBGColor('pass2', neutralColor); //if pass1 is blank, set neutral background if (password1.length === 0) { setBGColor('pass1', neutralColor); } else { setBGColor('pass1', badColor); } //else if passwords do not match } else if (password2 !== password1) { //we now know that pass1 is long enough feedback('Confirm password'); setBGColor('pass1', goodColor); //if pass2 is blank, set neutral background if (password2.length === 0) { setBGColor('pass2', neutralColor); } else { setBGColor('pass2', badColor); } //else all is well } else { feedback('Passwords match'); setBGColor('pass1', goodColor); setBGColor('pass2', goodColor); } } //helper function for document.getElementById() function getElm(id) { return document.getElementById(id); } //helper function for setting background color function setBGColor(id, value) { getElm(id).style.backgroundColor = value; } //helper function for feedback message function feedback(msg) { getElm('error-nwl').innerHTML = msg; }<input name="password" type="password" placeholder="password" id="pass1" onkeyup="checkPass()"/> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass()" /> <div id="error-nwl">Enter a password of at least 6 characters</div>Answers 15
You can use regular expiration which will do validation for you.. For example : I am allowing some special characters in this password and count is greater then 6
regex = pass1.value.search(/^[a-zA-Z0-9+&@#/%?=~_|!:,.;]{6,}+$/); if(regex){ message.innerHTML="Invalid Password."; }else{ message.innerHTML = " you have to enter at least 6 digit!"; } Answers 16
function checkPassSize(field) { var pass = document.getElementById(field); var message = document.getElementById('error-nwl'); var goodColor = "#66cc66"; var badColor = "#ff6666"; if (pass.value && pass.value.length > 5) { pass.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "character number ok!" return true; } else { pass.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " you have to enter at least 6 digit!" return false; } } function checkPass() { var pass1 = document.getElementById('pass1'); var pass2 = document.getElementById('pass2'); var message = document.getElementById('error-nwl'); var goodColor = "#66cc66"; var badColor = "#ff6666"; if(checkPassSize('pass1') && checkPassSize('pass2')){ if (pass1.value == pass2.value) { pass2.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "ok!" } else { pass2.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " These passwords don't match" } } } <input name="password" type="password" placeholder="password" id="pass1" onkeyup="checkPassSize('pass1');" /> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" /> <div id="error-nwl"></div> Answers 17
It appears that there are a few things you want to do.
- Password must be at least 6 character long, else a message ' you have to enter at least 6 digit!' in red shows up.
- Retype must match password, else a message ' These passwords don't match' in red shows up.
- If 'Both' condition passes, then show a green message 'ok!'. (My guess).
- If the fields are empty, then no special color. (My guess.)
- If password is valid but retype is empty, then show green message ' character number ok!' (Again, my guess).
My suggestions,
- if you are going to use onkeyup on pass2, then why not do the same thing in pass1?
- consider to use onfocusout event instead of onkeyup.
The following code should do what you are looking for.
function checkPass() { var getTag = Id => document.getElementById(Id); var pass1 = getTag('pass1'); var pass2 = getTag('pass2'); var message = getTag('error-nwl'); var str; //Logic that handles Password. if (!pass1.value) pass1.removeAttribute('valid'); else if (pass1.value.length < 6) { pass1.setAttribute('valid', false) str = " you have to enter at least 6 digit!"; } else { if (!pass2.value) str=" character number ok!"; pass1.setAttribute('valid', true);} //Logic that handles Retype. if (!pass2.value) pass2.removeAttribute('valid'); else if (pass1.value != pass2.value) { pass2.setAttribute('valid', false); str = " These passwords don't match"; } else pass2.setAttribute('valid', true); //Logic that handles the display of message. message.removeAttribute('valid'); if (pass1.value && pass2.value && !str) { message.setAttribute('valid', true); message.innerHTML = "ok!" } else if (str) { message.innerHTML = str; } else message.innerHTML = ''; return !!message.valid; }#pass1[valid=true] { background: #66cc66 } #pass1[valid=false] { background: #ff6666 } #pass2[valid=true] { background: #66cc66 } #pass2[valid=false] { background: #ff6666 } #error-nwl { color: #ff6666 } #error-nwl[valid=true] { color: #66cc66 }<input name="password" type="password" placeholder="password" id="pass1" onkeyup="checkPass()" /> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass()" /> <div id="error-nwl"></div>Answers 18
Here is with working code.. just had to change pass1.length to pass1.value.length
<html> <head> <script> function checkPass() { var pass1 = document.getElementById('pass1'); var pass2 = document.getElementById('pass2'); var message = document.getElementById('error-nwl'); var goodColor = "#66cc66"; var badColor = "#ff6666"; if(pass1.value == pass2.value){ pass2.style.backgroundColor = goodColor; pass1.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "ok!" } else{ pass2.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " These passwords don't match" } if(pass1.value.length > 5 && pass1.value==pass2.value){ pass1.style.backgroundColor = goodColor; pass2.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "character number ok!" } else{ pass1.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " you have to enter at least 6 digit!" } } </script> </head> <body> <input name="password" type="password" placeholder="password" onkeyup="checkPass();" id="pass1"/> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" /> <div id="error-nwl"></div> </body> </html> Answers 19
This code validate both fields while typing.
<!DOCTYPE html> <html> <body> <input name="password" type="password" placeholder="password" id="pass1" onkeyup="setStyle(this,document.getElementById('pass2'));"/> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="setStyle(this,document.getElementById('pass1'));" /> <div id="error-nwl"></div> <script> function isValidLength(element) { return (element.value.length>5); } function isEqual(element1,element2){ if(element1.value.length>0 && element2.value.length>0) return (element1.value==element2.value); return true; } function setStyle(element,element2) { var message = document.getElementById('error-nwl'); var goodColor = "#66cc66"; var badColor = "#ff6666"; var isValidPWD=isValidLength(element) && isEqual(element,element2); if(isValidPWD){ if(isValidLength(element)){ element.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "character number ok!" } if(isEqual(element,element2)) { element.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "ok!" } } else{ if(!isValidLength(element)){ element.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " you have to enter at least 6 digit!" } if(!isEqual(element,element2)) { element.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = " These passwords don't match" } } } </script> </body> </html> Answers 20
You could move the second if else block into the first if and obtain what you might have wanted. You also need to change pass1.length to pass1.value.length.
I also think that you should check changes on both input boxes. If you don't do that the user can switch back to the first input box and change the password afterwards and the check states won't update.
Here is the updated code.
function checkPass() { var pass1 = document.getElementById('pass1'); var pass2 = document.getElementById('pass2'); var message = document.getElementById('error-nwl'); var goodColor = "#66cc66"; var badColor = "#ff6666"; if(pass1.value.length > 5){ pass1.style.backgroundColor = goodColor; message.style.color = goodColor; //message.innerHTML = "character number ok!" if(pass1.value == pass2.value) { pass2.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "Ok!" } else{ pass2.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = "These passwords don't match!" } } else{ pass1.style.backgroundColor = badColor; message.style.color = badColor; message.innerHTML = "You have to enter at least 6 digits!" } } <input name="password" type="password" placeholder="password" id="pass1" onkeyup="checkPass(); return false;"/> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" /> <div id="error-nwl"></div> Answers 21
you can use validform.js.
For example：
<script type="text/javascript" src="http://validform.rjboy.cn/wp-content/themes/validform/js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="http://validform.rjboy.cn/Validform/v5.1/Validform_v5.1_min.js"></script> <script> $(".demoform").Validform(); </script> <form class="demoform"> <input type="password" value="" name="userpassword" datatype="*6-15" errormsg="Password range between 6~15 bits!" /> <input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="The account passwords you entered for the two time were not consistent." /></form>Answers 22
Try this out!
function resetcol() { pass1.style = ""; pass2.style = ""; } function checkPass() { var pass1 = document.getElementById('pass1'); var pass2 = document.getElementById('pass2'); var message = document.getElementById('error-nwl'); var goodColor = "#66cc66"; var badColor = "#ff6666"; if (pass1.value == pass2.value && pass1.value.length > 5){ pass2.style.backgroundColor = goodColor; message.style.color = goodColor; message.innerHTML = "ok!" } else{ pass1.style = message.style.color = badColor; message.innerHTML = "Bad input. your passwords must match, and be at least 6 characters long." } } <input name="password" type="password" placeholder="password" id="pass1" onkeyup="resetcol();"/> <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="resetcol();" onchange="checkPass(); return false;" /> <div id="error-nwl"></div> 
0 comments:
Post a Comment