Question

I am trying to do some validation check to the password field a form. I am calling a function onkeypress to check whether capsLock is on or off then onblur function check the password field value. But as I enter any value in the password field, the onblur runs immediately along with onkeypress. This defeats my purpose of checking the capslock and then the field value.

HTML:

<input type="password" size=50 name="password" value="" onkeypress="checkCapsLock(event);" onblur="chkPsw(this.value);">

JavaScript:

function chkPsw(inpsw){
    var psw = inpsw.toLowerCase(inpsw);
    psw = trim(psw);
    if (psw.length<4 || psw.length>15){
        alert ('password length can be min. 4 and max. 15 chars' );
        return false;
    }
    var p1=/^[a-z0-9_\-\!\@\$\%\&\(\)\{\}\[\]\<\>]+$/;/* a-z 0-9 _ - ! @ $ % & ( ) { } [ ] < > */
    if(p1.test(psw)) {
        alert("The password:::: "+psw+" :::: is ok.");
        return true;
    } else {
        var p2 = /\s+/;
        if (p2.test(psw)){
            alert(psw+" is not ok. Space is not allowed.");
            return false;
        } else{
            alert(psw+"\n is not ok only a-z 0-9 _ - ! @ $ % & ( ) { } [ ] < > ");
            return false;
        }
    }
}


function checkCapsLock( e ) {
    var myKeyCode=0;
    var myShiftKey=false;
    var myMsg='Caps Lock is On.\n\nTo prevent entering your password incorrectly,\nyou should press Caps Lock to turn it off.';

    // Internet Explorer 4+
    if ( document.all ) {
        myKeyCode=e.keyCode;
        myShiftKey=e.shiftKey;
    }

    if ( ( myKeyCode >= 65 && myKeyCode <= 90 ) && !myShiftKey ) {
        alert( myMsg );
        return false;
    } else if ( ( myKeyCode >= 97 && myKeyCode <= 122 ) && myShiftKey ) {
        alert( myMsg );
        return false;
    } else {
        return true;
    }
}

I think I made myself clear. If any one can help me that would be great.

What I want is when someone starts typing in this password field the status of capsLock is checked and told to the user and then when the complete field is filled out and the user moves to next field, the password value is checked.

Answer 1

Well, the problem is that you’re using alert boxes to notify the user (bad practice, and annoying) which results in the password field losing focus.

The solution? Use a boolean condition,

Here’s a jQuery example (I’m cleaning up your code),

jsFiddle: http://jsfiddle.net/MnMps/

jQuery.fn.caps = function(cb){
    return this.keypress(function(e){
        var w = e.which ? e.which : (e.keyCode ? e.keyCode : -1);
        var s = e.shiftKey ? e.shiftKey : (e.modifiers ? !!(e.modifiers & 4) : false);
        var c = ((w >= 65 && w <= 90) && !s) || ((w >= 97 && w <= 122) && s);
        cb.call(this, c);
    });
};

var alerting = false;

$('#password').caps(function(caps){
    if(caps){
        alerting = true;
        alert('Unintentional uppercase leads to wars!');
       }
});

$('#password').blur(function() {
    if(alerting == false && !this.value.match(/^[a-z0-9_\-\!\@\$\%\&\(\)\{\}\[\]\<\>]+$/)) {
        alert("Abort! Invalid character detected!");
    }
    alerting = false;
});

PS: Props to capslock detection, http://plugins.jquery.com/plugin-tags/caps-lock

EDIT: Gave up on cleaning up your code.