Ich erstelle ein Kontaktformular und validiere es mit jQuery. Wenn ich jedoch die Klasse .control-group verwende, tut mein Code nichts. Aber es funktioniert gut, wenn ich nicht .control-group damit benutze. Hier ist das 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>​

Und das 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;    
        }
    });
});​

Und eine Geige dazu: http://jsfiddle.net/GDXCE/ Und eine Geige, wenn ich keine Klassenkontrollgruppe verwende: http://jsfiddle.net/WgAZC/1/

Was mache ich falsch mit den Selektoren?

0
user1537415 7 Okt. 2012 im 19:42

3 Antworten

Beste Antwort

Sie setzen ein Leerzeichen zwischen die Selektoren

.control-group #nimi

Bedeutet, dass es ein Element mit id = nimi gibt, das ein Nachkomme eines Elements mit der Klasse .control-group ist

Die richtige Version sollte sein

.control-group#nimi

Wenn die Klasse und die ID beide zum selben Element gehören.

1
Mutahhir 7 Okt. 2012 im 15:47

Ändere das:

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

Zu:

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

#nimi gehört nicht zu den Nachkommen Ihres .control-group Elements.

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

http://jsfiddle.net/tTBRx/

Da Sie das Element anhand der ID auswählen und die IDs eindeutig sind, müssen keine anderen Selektoren verwendet werden.

$('#nimi').addClass("error")
2
undefined 7 Okt. 2012 im 15:52

Wenn Sie in Ihrer Auswahl ein Leerzeichen zwischen .control-group und #nimi setzen, wird nach #nimi gesucht. Dies ist ein untergeordnetes Element von .control-group, anstatt weiter zu definieren, welches .control-group Sie möchten . Versuche dies:

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

CSS-Auswahlreferenz

0
tomaroo 7 Okt. 2012 im 15:51