Question

I’m converting a login/registration page to using Ajax/jQuery. As such, there is alot of common validation functionality between the two forms. One area that I’m using jQuery for is to output error messages to the user based on the input. While the forms share similar element IDs, class names differ.

So for checking the username, I have

if ($(":input").is('.registerName')){
   //Username belongs to the registration form, so check if current entry is 
   //valid and not taken.  Output error message otherwise

}  else {
   //username belongs to the login form, so check if current entry exists in database
   //output username/password error depending on catch
}

I’ve experienced some strange happenings.

First, the above code returns a g.nodeName is undefined error. If I change the initial conditional to

if ($("input#username").is('.registerName'))

the same error shows up in Firebug.

However,

if ($("#username").is('.registerName'))

and

if ($("#username").hasClass('registerName))

both fail and the login validation section executes.

So how can I get the right code block to execute based on class name without a g.nodeName undefined error?

EDIT

To clarify- there are NOT two forms on the same page. The code functionality is in the javascript. I’m referring to two separate HTML forms on differing pages that call the same JS function and the only difference is the text in the error messages output.

EDIT 2

JFiddle example: Here

The text box onclear doesn’t work for the fiddle, but I think you can get the gist of what I’m trying to do.

Answer 1

I can’t reproduce the exact issue you got, but try

if ($(this).is('.registerName'))

instead. That way you’ll know it’s only looking at the particular element on which the keyup event occurred. $(':input') will look for all inputs on the page.