Keyup password and form submit
Form with validation as the user types, want to submit only if true and there is a value in the password box.
HTML
<form id="form-password-change" class="form-validate" method="post" action="/xxxx">
<div class="control-group">
<label class="control-label" for="input-username">Username</label>
<div class="controls">
<input type="text" id="input-username" name="username" class="required" value="Username" autocomplete="off" />
</div>
</div>
<div id="password-info">
<ul>
<li id="letter" class="invalid">At least <strong>3 letters</strong>, <span class="repeated valid">none repeating more than twice</span>
</li>
<li id="capital" class="invalid">At least <strong>1 capital letter</strong>
</li>
<li id="number" class="invalid">At least <strong>2 numbers</strong>, <span class="repeated valid">none repeating more than twice</span>
</li>
<li id="length" class="invalid">At least <strong>8 characters</strong>
</li>
</ul>
</div>
<div class="control-group">
<label class="control-label" for="input-password">Password</label>
<div class="controls field">
<input type="password" id="input-password" name="password" placeholder="Password" autocomplete="off" />
</div>
</div>
<button type="submit" class="btn btn-large btn-wide btn-primary">Send Request</button>
</form>
SCSS
#password-info {
margin: 20px 0;
overflow: hidden;
background: #f0f0f0;
text-shadow: 0 1px 0 #fff;
border: 1px solid #ddd;
.border-radius(5px);
h2 {
font-size: @14px;
font-family: Arial;
color: @gray;
}
ul {
list-style: none;
margin: 0;
li {
padding: 15px 40px;
margin: 0 -40px;
background: #f0f0f0;
border-top: 1px solid #e6e6e6;
.transition(ease 250ms);
.helper {
float: right;
color: #ccc;
font-size: 1.786em;
}
}
li:first-child {
border-top: 0;
}
li.invalid {
background:url(../img/invalid.png) no-repeat 20px center;
line-height:24px;
color:#777;
}
li.valid {
background:url(../img/tick-small.png) no-repeat 20px center;
line-height:24px;
color:#3a7d34;
}
li.valid.invalid-repeated {
background:url(../img/invalid.png) no-repeat 20px center;
}
span.invalid {
color:#ff642e;
}
}
}
JavaScript
var MyGlobalVar = {};
( function(PasswordInput) {
var passwordValid = false;
var pwdInput = null;//
var btnSubmit = null; //
PasswordInput.Init = function()
{
pwdInput = $('#form-password-change #input-password');
btnSubmit = $('#form-password-change button[type="submit"]');
$('#password-info').hide();
pwdInput.on('change', Validate); // Setting to change instead of keyup should optimize your code unless you are stripping values if they are not valid
btnSubmit.on('click', ValidateAll);
pwdInput.focus(function(){
$('#password-info').slideDown('fast');
});
}
var Validate = function(oEvent) // Object containing event information
{
// Check if the input is valid
var sVal = $(this).val();
// validate the length
if (sVal.length > 7)
{
$('#form-password-change #length').removeClass('invalid').addClass('valid');
passwordValid == true;
alert("variable set!");
}
else
{
$('#form-password-change #length').removeClass('valid').addClass('invalid');
}
}
var ValidateAll = function(oEvent)
{
if (passwordValid == true) {
alert("submitting the value");
return;
}
else {
// Do some validation msg stuff
alert("submission blocked");
return false; // Prevent form from being submitted
}
}
}( MyGlobalVar.PasswordInput = MyGlobalVar.PasswordInput || {}));
$(document).ready( MyGlobalVar.PasswordInput.Init );