JQuery validation using is() and multiple CSS classes

Question

Trying to debug something that basically .trim()'s, .val()'s and .length's a textarea input as HTML below (truncated):

<form id="Kontaktanfrage" method="post" action="tests/testform/">
...
<textarea cols="50" rows="8" id="el_12" name="FORM[Kontaktanfrage][el_12]" title="Ihre Nachricht: *" class="textarea required"></textarea>
...
</form>

JavaScript:

function validateField(formId, fieldId) {
if (fieldId) {
    var element = "form#"+formId+" input#"+fieldId;
    var fieldValue = jQuery.trim(jQuery(element).val());
    var fieldLength = fieldValue.length;
    var fieldError = "";
    if ($(element).is('.textarea.required') && fieldLength == 0) {
        fieldError = "error message";
    }
}

}

The above if check is never true.

Using JQuery: 1.4.1.

Having seen other examples online, I can't see what the difference should be. Feel free to test it in FireBug at (http://www.initiat.de/tests/testform/). Any help appreciated, can't see what I'm doing wrong.

Ben Koehler · Accepted Answer · 2010-04-30 19:48:15Z

1

You're creating your selector assuming that all of your fields are Input elements. TextArea is a different element and your selector should reflect that. I don't think that performance will take a big hit if you change this line

var element = "form#"+formId+" input#"+fieldId;

to this

var element = "form#"+formId+" #"+fieldId;

answered Apr 30, 2010 at 19:48

Ben Koehler

8,6913 gold badges26 silver badges23 bronze badges

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

1 Comment

Alex Over a year ago

Thanks Ben, I forgot all about textarea not technically being of type 'input', it's one of my biggest annoyances in HTML. Thanks for spotting it :)

Tejs · Accepted Answer · 2010-04-30 19:30:00Z

1

Why not use

.hasClass()

answered Apr 30, 2010 at 19:30

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

2 Comments

Alex Over a year ago

I need to check 2 classes, hasClass() only checks 2 if it in a literal order, not in any order. I need the flexibility

Tejs Over a year ago

You could always go element.hasClass(class1) && element.hasClass(class2)

JOBG · Accepted Answer · 2010-04-30 19:36:13Z

0

Try with

if ($(element).hasClass('textarea') && $(element).hasClass('required') && fieldLength == 0) {
        fieldError = "error message";
    }

answered Apr 30, 2010 at 19:36

JOBG

4,6244 gold badges30 silver badges48 bronze badges

Collectives™ on Stack Overflow

JQuery validation using is() and multiple CSS classes

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related