Register Validation
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/parsley.js/1.1.16/parsley.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<form id="register-form" class="form" data-validate="parsley">
<legend><span class="blue">Register</span>
</legend>
<div class="body">
<!-- email -->
<label>E-mail</label>
<input type="text" class="input-huge" name="email" id="email" data-bind="value:registerEmail" data-required="true" data-type="email"/>
<!-- password -->
<label>Password</label>
<input type="text" class="input-huge" id="pw1" name="password" data-bind="value:registerPassword" data-required="true" data-minlength="7" data-numcount="1" data-uppercount="1" data-lowercount="1" data-toggle="tooltip" title="Must be at least 7 characters with one uppercase character, one lowercase
character and one number"/>
<label>Confirm Password</label>
<input type="text" class="input-huge" id="pw2" name="password2" data-bind="value:confirmPassword" data-required="true" data-minlength="7" data-equalto="#pw1" data-error-message="Passwords do not match"/>
</div>
<div class="footer">
<label class="checkbox inline">
<input type="checkbox" name="agree" data-bind="checked:agree"/>I agree to Terms and Conditions</label>
<br/>
<button type="submit" class="btn btn-success" data-bind="click:register, enable:agree">Register</button>
</div>
</form>
JavaScript
$(function () {
vm = new viewModel();
ko.applyBindings(vm);
//Bootstrap tooltip
$('#pw1').tooltip({
placement: "right"
});
});
//Apply validation for password strength
$('#register-form').parsley({
validators: {
uppercount: function (val, uppers) {
return countContain(val, m_strUpperCase) >= uppers
},
lowercount: function (val, lowers) {
return countContain(val, m_strLowerCase) >= lowers
},
numcount: function (val, nums) {
return countContain(val, m_strNumber) >= nums
}
},
messages: {
uppercount: "Must be at least %s uppercase character",
lowercount: "Must be at least %s lowercase character ",
numcount: "Must be at least %s number"
}
});
function viewModel() {
var self = this;
self.registerEmail = ko.observable();
self.registerPassword = ko.observable();
self.confirmPassword = ko.observable();
self.agree = ko.observable(false);
self.register = function () {
$("#register-form").submit();
};
}
//Count number of uppercase, lowercase, numeric and special characters
var m_strUpperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var m_strLowerCase = "abcdefghijklmnopqrstuvwxyz";
var m_strNumber = "0123456789";
var m_strCharacters = "!@#$%^&*?_~";
function countContain(strPassword, strCheck) {
// Declare variables
var nCount = 0;
for (i = 0; i < strPassword.length; i++) {
if (strCheck.indexOf(strPassword.charAt(i)) > -1) {
nCount++;
}
}
return nCount;
}