jquery error: val() is not a function

Question

Why I'm getting this error? val is not a function when I validate the number.

$(this).find('#register-validation .next').click(function() {
     var _parent = $(this).parents('#register-validation');
     $('.loading-big').html(loadMsg).fadeIn(300);
     _parent.find('input.required').each(function(index) {
         if($(this).val() == "" || $(this).val() == errReq) { // here is fine
             $(this).val(errReq);
             $(this).addClass("error");
         }
         else if(isNaN($(this).hasClass('number').val())) { // but when validation goes here, I got this error.
             $(this).val(errNum);
             $(this).addClass("error");
         }
         else {
             $(this).removeClass("error");
         }
     });
});

Please help. Thanks a lot.

Answer 1

$(this).hasClass('number').val()

That line is causing your problem. You are calling .val() on the boolean returned by hasClass(). You have to be a bit careful when chaining methods as although most will return the jquery object some return different values and therefore can't be chained.

Try this instead:

$('.number', this).val()

This will select all elements with the class of number in the context of this. It's the same as doing $(this).find('.number').val()

Answer 2

 else if(isNaN($(this).hasClass('number').val())) {

should be

 else if($(this).hasClass('number') && isNaN($(this).val())) {

Answer 3

$(this).hasClass('number') returns a boolean as far as I know, so you can't chain it.

Also you might want consider caching the jquery object so that it doesn't have to create the object over and over again.

Simply putting $this = $(this) inside your method and referring to $this will improve your performance a wee bit.