Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Chad Mueller
Chad Mueller
5,459 Points

jQuery form input validation not working when creating a separate check function.

I have created a jQuery field validator that checks to ensure all fields with the class of required are set and it is working fine. I am now trying to separate functionality for DRY purposes as taught and that is when the error occurs:

functioning code:

    $(".required").focus(function()
        {
            //Find out if required fields are set
            if($(this).val().length > 0)
            {
                //Hide hint if set
                $(this).next().hide();
            }
            else
            {
                //else show hint
                $(this).next().show();
            }
        });

Non functioning Code:

    // Validates required fields
    function isRequiredFieldSet()
    {
        return $(this).val().length > 0;
    }

    // Shows and hides hints for required fields
    function requiredFieldEvent()
    {
        //Find out if required fields are set
        if(isRequiredFieldSet())
        {
            //Hide hint if set
            $(this).next().hide();
        }
        else
        {
            //else show hint
            $(this).next().show();
        }
    }

In the console, when the code is separated in this manner, I receive the error: "Uncaught TypeError: Cannot read property 'toLowerCase' of undefined" in file jquery-1.11.0.min.js:4.

I have created 2 jsfiddles to better demonstrate what I mean: working: https://jsfiddle.net/wr347vfk/1/ non working: https://jsfiddle.net/fe6e4863/

Any help would be appreciated !

2 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Chad,

The problem you're running into is the usage of the variable this. this is defined all of the time, but it is defined differently in methods on a selector, than it is outside of those methods. i.e. type "this" into the console and you'll see it returns the window object.

To fix this (no pun intended), I just added the this variable to the function call so that it can pass the information about the selector it came from to the referenced function and replaced this in the isRequiredFieldSet function with a function variable called "arg" (or whatever you'd like to call it) that contains the information gathered from this:

//Hide hints
    $("form span").hide();

// Validates required fields
    function isRequiredFieldSet(arg)
    {
        return $(arg).val().length > 8;
    }

    $(".required").focus(function()
    {
        //Find out if required fields are set
        if(isRequiredFieldSet(this))
        {
            //Hide hint if set
            $(this).next().hide();
        }
        else
        {
            //else show hint
            $(this).next().show();
        }
    });

    $(".required").keyup(function()
    {
        //Find out if required fields are set
        if(isRequiredFieldSet(this))
        {
            //Hide hint if set
            $(this).next().hide();
        }
        else
        {
            //else show hint
            $(this).next().show();
        }
    });
Chad Mueller
Chad Mueller
5,459 Points

Makes perfect sense and works like a charm. Thanks so much!

Marcus Parsons
Marcus Parsons
15,719 Points

You're very welcome, Chad! But, just keep in mind what I said about this because it is a very tricky variable, as you can tell lol Good luck!

Marcus Parsons
Marcus Parsons
15,719 Points

Oh, and I did change that return value inside the function for testing purposes! lol

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

That error message means that somewhere in your code, you're calling the toLowerCase() method on an object that is undefined, or doesn't exist. It doesn't look like that method is anywhere in the code you pasted, so the error might be elsewhere.

Chad Mueller
Chad Mueller
5,459 Points

Thanks Ryan. Oddly enough I am not calling toLowerCase() anywhere in my code. However, I agree that the error could be unrelated to the issue. Hopefully the 2 JS fiddle links help clarify.

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Ryan,

If you see someone who says that they get an error in jQuery (with unmodified code), it usually means that the error lays within their own code. When references get handled improperly using jQuery, the browser will say that the error lies within jQuery because that is where the code is being translated.