Jquery Keypress + .val() issues

Question

I am trying to perform validation on some fields by binding a function to the keypress event.

I make several custom validation objects and place them in an array validations (full code not shown):

    {"id": "DE-mname", "events":"keypress", "func": function(obj){
        return validator.name($(obj).val()) || $(obj).isEmpty();
    }

and attach it to certain components using the following method and a custom jquery plugin:

DataEntry.prototype.attachValidators = function(){
        var x, validation;
        for(x in this.validations)
        {
            validation = this.validations[x];
            $("#" + validation.id).attachValidation(validation.events,validation.func); 
        }
};

/**
 *
 * @param {String} Events - a string of events you want validation to execute on
 * should be delimited by a space.
 * @param (Function) validateFunc - a function used to determine if the field is valid,
 * must return true, truthy, false or falsey values, the function may accept an object
 * as the first parameter which will be the selected jquery object.
 */
(function($){
    $.fn.extend({
        attachValidation: function(events, validateFunc){
            events += " validate";
            return this.each(function(){
                var that = this;
                $(this).bind(events, function(event){
                    if (validateFunc(that, event)) {
                        $(that).removeClass("error");
                    }
                    else {
                        $(that).addClass("error");
                    }
                    jq(this).trigger("errorAttached");
                });
            });
        }
    });
})(jQuery

The problem I am experiencing is that when the keypress event is fired and the validation function checks the .val() of a textbox component, the new value does not contain the current key being pressed.

For example: If I clicked in an input field and hit the '$' key, $(obj).val()) would return an empty string, instead of $. I would like to retrieve the value with the key currently being pressed. Please note that I cannot switch to the keyup event

Ok, working on switching to checking for the tab key, after this is working I have the harder task of figuring out who to give credit for the answer — Kevin Bowersox, Jul 11 '11 at 11:41

score 2 · Accepted Answer · answered Jul 11 '11 at 11:30

2

You can check a couple different properties of the event to see which key(s) were pressed:

You can then combine that information with the current value to determine the new value. It gets complicated when you need to handle keypress events like Delete, Backspace, Delete, Ctrl-C, Ctrl-V, etc.

In general, your task will be much easier if you switch to using keyup. I know you said you can't, but I'm just putting that out there.

One other point: there is no jQuery .isEmpty() method, as in your code.

answered Jul 11 '11 at 11:30

Matt Ball

354,903
100
647
710

I agree, however when I use the keyup event the field validates if I tab to it, causing it to receive the error class that makes the field red. BTW, isEmpty() is my own custom plugin. – Kevin Bowersox Jul 11 '11 at 11:35
2

You'll have a much easier time with validation if you just use `keyup` and work around the tab issue. Another thought: **just use the `.change()` event**. – Matt Ball Jul 11 '11 at 11:37
the change event only fires on blur, which makes the validation seem less responsive – Kevin Bowersox Jul 11 '11 at 11:39
In the keypress event, the `shiftKey` and `ctrlKey` properties are irrelevant, since the `which` property already corresponds to a character code rather than a key code. – Tim Down Jul 11 '11 at 13:54

VAShhh · Answer 2 · 2011-07-11T11:40:54.543

1

Try to use the charCode conversion to obtain the pressed button

String.fromCharCode(e.which)

take a look at the fiddle

http://jsfiddle.net/5ASA9/3/

You cannot check directly the val of your input because this event occurs before the field valorization.

edited Jul 11 '11 at 11:40

answered Jul 11 '11 at 11:28

VAShhh

3,494
2
24
37

1

With jQuery, `e.which` should be used. – Matt Ball Jul 11 '11 at 11:30
@VAShh should I just append that on to the value and validate? – Kevin Bowersox Jul 11 '11 at 11:31
1

Yes, anyway for a much better validation you should refer to the keyup like jQuery says http://api.jquery.com/keypress/ – VAShhh Jul 11 '11 at 11:34
check the updated fiddle to know how the string that you're checking changes. – VAShhh Jul 11 '11 at 11:41

score 1 · Answer 3 · answered Jul 11 '11 at 11:30

1

the keypress event is probably a poor choice to use for validation of this type as it occurs before the change event of the target object (the textbox in this case). You can capture the the key character being entered, but since the textbox value has not yet been changed you can not validate the new value. Perhaps keyup would be a better choice for you. Which you say you can not use, why? What prevents you from using this event?

answered Jul 11 '11 at 11:30

Cos Callis

5,051
3
30
57

I agree, however when I use the keyup event the field validates if I tab to it, causing it to receive the error class that makes the field red. – Kevin Bowersox Jul 11 '11 at 11:34
1

@kmb _that's_ the reason you're not using `keyup`? If so, it's a lot easier to work around that particular issue than to try to use `keypress`. – Matt Ball Jul 11 '11 at 11:35
So you think I should just use keyup and check for the tab key? – Kevin Bowersox Jul 11 '11 at 11:37
@kmb, @Matt is correct, much easier to code in "don't validate if the key was 'tab'". – Cos Callis Jul 11 '11 at 11:37

score 0 · Answer 4 · edited May 23 '17 at 12:04

0

Use the HTML5 input event. See this answer.

edited May 23 '17 at 12:04

Community

1
1

answered Jul 11 '11 at 13:42

Tim Down

318,141
75
454
536

Jquery Keypress + .val() issues

4 Answers4