Question

My title may be a bit unclear so I’ll try to explain a bit better.

I have a signup form and I’m checking whether all of the required fields are filled or not. For one particular section of the form, I have a div with 7 or 8 classes and I need that div to display if I’m looking for two of them.

Here’s what I’m trying to do that isn’t working.. (this will work when using two specific classes, but not when extra classes are also there.)

HTML

<div class="errors last first address city state zip country email phone" style="display: none;"><span class="error">Required values are missing from your contact information.</span></div>

jQuery

   $('form#finalize').submit(function() {
        var required = ['hostname','first','last','address','city','state','zip','country','email','phone'];
        var result = true;
            $.each(required, function(index, value) {
                if(filledElement(value) == false){
                    $(".item.errors").show().fadeOut(8000);
                    result = false;
                }

            });
            if(checkElement('tos') == false){
                $(".item.errors").show().fadeOut(8000);
                return false;
            }
            return result;
    });


    function filledElement(elem){
        if( isSet(elem) != true ) {
            $('.'+elem+'.errors').show();
            return false;
        }
        else {
            $('.'+elem+'.errors').remove();
            return true;
        }
    }

So once again to clarify.. the issue is in the function filledElement, when it goes to display the error, ‘.’+elem+’.errors’ is looking for an element that only contains those two classes, rather than looking for an element that may contain those two classes and more.

Any work around for this? I could just throw in something like…

if (item in required).. $(‘.errors.first.last.address.phone … etc’).show(); but that just seems unnecessary and it’s not very flexible if my template were to change.

Answer 1

No, that is not your problem. You don’t need to have all the classes in the selector, having just two of them works fine. Demo: jsfiddle.net/Guffa/fj95m/

The problem is in the else statement in the filledElement function. If any of the fields is filled in, you remove the error message element.