EDIT: Made a slight modification due a bug I found. If you typed a password and then deleted both passwords, it would make the confirmation box green since both fields matched. It's now changed that if the field length = 0, it will make the confirm box red.
I wanted to add a little variety to the password boxes on the registration page. It can be fully customized to your needs. There may be a bug or so that I haven't found yet, and the code could probably be optimized, but I'm not pro at this. I just wanted to share this tip.
This will change the background of the confirmation box if the passwords don't match, and will bring up the tool tip to the right of the password box with the password security that you need for your site.
Start with the designer tab, common pages, register
- Insert HTML test with the following code:
<div id="pswd_info">
<h4>Password must meet the following requirements:</h4>
<ul>
<li id="letter" class="invalid">At least <strong>one letter</strong></li>
<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
<li id="number" class="invalid">At least <strong>one number</strong></li>
<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
</ul>
</div>
- Click the confirm_password field, and rename the item id to just "confirm" to simplify things.
Go to the editor tab, click this page has custom settings and inset the following CSS:
/* Styles for verification */
#pswd_info {
position:absolute;
width:250px;
padding:15px;
background:#fefefe;
font-size:.875em;
border-radius:5px;
box-shadow:0 1px 3px #ccc;
border:1px solid #ddd;
display:none;
}
#pswd_info::before {
content: "\25C4";
position:absolute;
left:-15px;
top:2px;
font-size:14px;
line-height:14px;
color:#ddd;
text-shadow:none;
display:block;
}
#pswd_info h4 {
margin:0 0 10px 0;
padding:0;
font-weight:normal;
}
.invalid {
background:url(images/invalid.png) no-repeat 0 50%;
padding-left:22px;
line-height:24px;
color:#ec3f41;
}
.valid {
background:url(images/valid.png) no-repeat 0 50%;
padding-left:22px;
line-height:24px;
color:#3a7d34;
}
On the events tab, insert the following Javascript OnLoad event:
// Set Password and Confirm password to readable values
var ctrlPassword = Runner.getControl(pageid, 'password');
var ctrlConfirm = Runner.getControl(pageid, 'confirm');
// Compare the values to make sure they match, sets background color
ctrlConfirm.on('keyup', function(e) {
if (ctrlConfirm.getValue().length < 1){
ctrlConfirm.addStyle("background-color:#ff6666");;}
else{
if (ctrlConfirm.getValue() == ctrlPassword.getValue()){
ctrlConfirm.addStyle("background-color:#66cc66");;}
else{
ctrlConfirm.addStyle("background-color:#ff6666");;}
}});
// Controls the box to appears and disappear when clicking on the password box
ctrlPassword.on('keyup', function(e) {
})
ctrlPassword.on('focus', function() {
$('#pswd_info').show();
})
ctrlPassword.on('blur', function() {
$('#pswd_info').hide();
});
// Checks the length of the password, in this case at least 8 characters
ctrlPassword.on('keyup', function(e) {
if (ctrlPassword.getValue().length < 8)
{
$('#length').removeClass('valid').addClass('invalid');
} else {
$('#length').removeClass('invalid').addClass('valid');
}
})
// Checks that there is at least 1 letter
ctrlPassword.on('keyup', function(e) {
if (ctrlPassword.getValue().match(/[A-z]/)) {
$('#letter').removeClass('invalid').addClass('valid');
} else {
$('#letter').removeClass('valid').addClass('invalid');
}
})
// Checks that there is at least 1 uppercase letter
ctrlPassword.on('keyup', function(e) {
if (ctrlPassword.getValue().match(/[A-Z]/)) {
$('#capital').removeClass('invalid').addClass('valid');
} else {
$('#capital').removeClass('valid').addClass('invalid');
}
})
// Checks that there is at least 1 number
ctrlPassword.on('keyup', function(e) {
if (ctrlPassword.getValue().match(/\d/)) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
}
})