0

I'm creating a contact form and I'm validating it with jQuery. However, if I use class .control-group, my code isn't doing anything. But it works fine if I don't use .control-group with it. Here's the html:

<form class="form-horizontal" id="contact">
    <div class="control-group" id="nimi">
        <label class="control-label">Nimi</label>
        <div class="controls">
            <div class="input-prepend"> <span class="add-on"><i class="icon-envelope"></i></span>
                <input type="text" placeholder="Nimi" name="nimi">
            </div>
        </div>
    </div>
    <div class="control-group" id="sposti">
        <label class="control-label">Sähköposti</label>
        <div class="controls">
            <div class="input-prepend"> <span class="add-on"><i class="icon-user"></i></span>
                <input type="text" placeholder="Sähköposti" name="sposti">
            </div>
        </div>
    </div>
    <div class="control-group" id="viesti">
        <label class="control-label">Viesti</label>
        <div class="controls">
        <textarea name="viesti"></textarea>       
        </div>
    </div>
    <div class="control-group">
        <label class="control-label"></label>
        <div class="controls">
        <input type="submit" class="btn btn-success sendbutton" value="Lähetä">       
        </div>
    </div>
</form>​

And the javascript:

$(document).ready(function(){
    $('.sendbutton').click(function(){
        var nimi = $('input[name=nimi]').val();
        var viesti = $('input[name=viesti]').val();
        $('.control-group').removeClass("error");

        if(nimi == ""){
          $('.control-group #nimi').addClass("error");
          return false;    
        }
        if(viesti == ""){
          $('.control-group #nimi').addClass("error");
          return false;    
        }
    });
});​

And a fiddle about this: http://jsfiddle.net/GDXCE/ And a fiddle if I don't use class control-group: http://jsfiddle.net/WgAZC/1/

What I'm doing wrong with the selectors?

Improve this question

3 Answers 3

Reset to default
2

Change this:

$('.control-group #nimi').addClass("error");

To:

$('.control-group#nimi').addClass("error");

#nimi is not one of descendants of your .control-group element.

<div class="control-group" id="nimi">

http://jsfiddle.net/tTBRx/

As you are selecting the element by ID and IDs are unique, there is no need to use other selectors.

$('#nimi').addClass("error")
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

You know IDs are unique so the class selector is just redundant/clutter in this case.
1

You're putting in a space between the selectors

.control-group #nimi

means that there is an element with id = nimi which is a descendant of an element having the class .control-group

the correct version should be

.control-group#nimi

if the class and id both belong to the same element.

Improve this answer

Comments

0

In your selector, putting a space between .control-group and #nimi will look for #nimi is a child element of .control-group, instead of further defining which .control-group you want. Try this:

if(nimi == ""){
    $('.control-group#nimi').addClass("error");
    return false;    
}

CSS Selector Reference

Improve this answer

Comments