Javascript: Combine function argument with string to reference var

Question

I have vars that look like this:

var cardholder = $("#cardholder");
var cardholderInfo = $("#cardholder-Info");

And a function (which doesn't currently work) that looks like this:

function validateRequired(field){
    //if it's NOT valid
    if(field.val().length < 1){
        field.addClass("field_error");
        fieldInfo.text("(Required)");
        fieldInfo.addClass("error");

        return false;
    }
    //if it's valid
    else{
        field.removeClass("field_error");
        fieldInfo.text("");
        fieldInfo.removeClass("error");
        return true;
    }
}

Which I access like:

cardholder.keyup(validateRequired(cardholder));

I've looked everywhere but I can't find what I need and I'm not really sure what I should be searching for.

I can use the field value to access the straight cardholder var. But I also want to use the field value to then reference cardholderInfo so I can manipulate that element in the function.

Either use two arguments and pass in the cardholderInfo, or make use of javascripts lexical scoping and just use cardholderInfo in your function, if the function is defined in the same scope as cardholderInfo or in a scope which is further down the scope chain starting from cardholderInfo. — Johannes Lumpe
– Johannes Lumpe, Commented May 8, 2013 at 14:51
Let's get this straight: what DO you need? I think there is a much easier way of what you are trying... — Kiruse
– Kiruse, Commented May 8, 2013 at 14:53
@pythonian29033 Please please please never alert, learn how to use the console and log the object with console.log(field) in Chrome and Firefox with firebug you can click through the logged object to inspect it's properties. — HMR
– HMR, Commented May 8, 2013 at 14:58

Derek Henderson · Accepted Answer · 2013-05-08 14:57:32Z

3

You would call the function like this, passing the second parameter:

cardholder.keyup(function () {
    validateRequired(this, cardholderInfo);
});

And modify your function to take a second parameter:

function validateRequired(field, fieldInfo){
    /* validation stuff */
}

edited May 8, 2013 at 14:57

answered May 8, 2013 at 14:51

Derek Henderson

9,7364 gold badges46 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pythonian29033 Over a year ago

well spotted son! crap why didn't I see that?

HMR Over a year ago

this in keyup is not a jquery object so trying to do .val() on that will break the code.

Derek Henderson Over a year ago

@HMR, you are correct, and knowing this the validation function would have to turn that into a jQuery object if it wants to use .val() (perhaps with $(field)). My answer is showing how to pass the values to the function (which is what was asked), not actually do the validation.

HMR Over a year ago

It's a good answer, just a heads up to the OP that it'll break the validateRequired function unless called like: validateRequired($(this), cardholderInfo);

HMR · Accepted Answer · 2013-05-08 15:01:40Z

2

No need for the global variables:

function validateRequired($cardInfo){
    // You can guess what $cardInfo is
    //if it's NOT valid
    if(this.val().length < 1){
        this.addClass("field_error");
        $cardInfo.text("(Required)");
        $cardInfo.addClass("error");

        return false;
    }
    //if it's valid
    else{
        this.removeClass("field_error");
        $cardInfo.text("");
        $cardInfo.removeClass("error");
        return true;
    }
}


$(document).ready(function(){
  $("#cardholder").keyup(function(){
     validateRequired.call($(this),$("#cardholder-Info"));
  });
});

edited May 8, 2013 at 15:01

answered May 8, 2013 at 14:56

HMR

39.5k26 gold badges99 silver badges175 bronze badges

2 Comments

pythonian29033 Over a year ago

edit your code in the validate function, it's more erronious than the code in question

HMR Over a year ago

Thanks, didn't see the difference between field and fieldinfo. changed the code

Bergi · Accepted Answer · 2013-05-08 14:52:12Z

1

Don't call the function you want to bind! If you need to pass an argument to it every time it is called, you either need to use bind or a function expression:

cardholder.keyup(functio(e) {
    return validateRequired(cardholder, cardholderInfo);
});

Also you will need a second parameter in your validateRequired function to get the fieldInfo variable filled:

function validateRequired(field, fieldInfo){
    …

answered May 8, 2013 at 14:52

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

Adil · Accepted Answer · 2013-05-08 14:52:47Z

1

You have to pass reference of function in keyup, you do not have to call function

cardholder.keyup(function(){
    validateRequired(cardholder)
});

answered May 8, 2013 at 14:52

Adil

148k25 gold badges217 silver badges207 bronze badges

Collectives™ on Stack Overflow

Javascript: Combine function argument with string to reference var

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related