I've created a password input module which has a couple of regexes and a list underneath telling the user which requirements to meet in order to create the password, aka submit the form. I'm adding/removing a class to each requirement list item on keyup depending on if it meets the requirement or not.
I'm using QUnit to test if these elements gets the class or not. Any ideas?
Codepen: http://ift.tt/1WpIOSn
HTML looks roughly like this:
<label for="password">Password input</label>
<input pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[a-z]).*$" id="password" name="password" type="password">
<ul class="input-requirements-list">
<li class="input-requirements-list__item" data-psw-req="8-chars">8 characters minimum</li>
<li class="input-requirements-list__item" data-psw-req="1-special-char">1 special character</li>
</ul>`
JS looks roughly like this:
function passwordRegEx($input, $list) {
var currentVal;
var affirmativeClass = 'affirmative';
function okCheck($el, affirmative) {
if (affirmative === true) {
$el.addClass(affirmativeClass);
} else {
$el.removeClass(affirmativeClass);
}
}
//Requirements as shown in requirements list underneath password input
var $charChecker = $list.find('[data-psw-req="8-chars"]'),
$specialCharChecker = $list.find('[data-psw-req="1-special-char"]');
$input.keyup(function() {
currentVal = $input.val();
//More than 8 characters
if (currentVal.length >= 8) {
okCheck($charChecker, true);
} else {
okCheck($charChecker, false);
}
//Special character match
if (currentVal.match(/[-!$%^&*()@øæåØÆÅ_+|~=`{}\[\]:";'<>?,.\/]/)) {
okCheck($specialCharChecker, true);
} else {
okCheck($specialCharChecker, false);
}
});
}
QUnit test looks like this:
var $passwordInput = $('#password'),
affirmativeClass = 'affirmative';
var $reqItem1 = $('li[data-psw-req="8-chars"]'),
reqItem2 = $('li[data-psw-req="1-special-char]');
QUnit.test("Expect [data-psw-req=8-chars] to have class when requirements are met", function(assert) {
$passwordInput.val('123456789dddddd');
ok($reqItem1.hasClass(affirmativeClass), true, "It has the class!");
});
Aucun commentaire:
Enregistrer un commentaire