CODEWITHSUNDEEP
javascriptjquery
Kevin Bowersox
Kevin Bowersox

Reputation: 94499

Jquery Keypress + .val() issues

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

Upvotes: 0

Views: 1035

Answers (4)

Tim Down
Tim Down

Reputation: 324707

Use the HTML5 input event. See this answer.

Upvotes: 0

VAShhh
VAShhh

Reputation: 3514

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.

Upvotes: 1

Cos Callis
Cos Callis

Reputation: 5084

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?

Upvotes: 1

Matt Ball
Matt Ball

Reputation: 360026

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.

Upvotes: 2

Related Questions