Question

Using jQuery validation for ajax form submission and I would like to add a class to the errorContainer if any of the text inputs have a class ‘error’. Seems simple but I think it’s a scope issue?

if ($('#myInput').hasClass('error')) { 
  $('#errorContainer').addClass('foo'); 
}

I have placed this outside the submit handler, inside submit handler, outside of validation call, inside validation call… all to no avail. Has anyone done this simple task with success?

Answer 1

You can do this:

if ($('input[type=text].error').length > 0) { 
  $('#errorContainer').addClass('foo'); 
}

The selector $('input[type=text].error') is going to return an array-like object even if there is only one match. So asking an array if it hasClass('error') doesn’t make sense.

What you really want to do is put a container around your elements you want to check for the error class. You might already have a container like the form (if it is all the inputs on the form). Then you can do something like this:

<form id="myForm">
  <input type="text" name="a" />
  <textarea name="b"></textarea>
  <input type="submit" value="Submit" />
</form>

With JavaScript:

$(':input.error', '#myForm').length > 0

Here is an example jsfiddle. Note that using the :input selector will more input types than just input which may be what you want.