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?
3 Antworten
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.
Ä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">
Da Sie das Element anhand der ID auswählen und die IDs eindeutig sind, müssen keine anderen Selektoren verwendet werden.
$('#nimi').addClass("error")
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;
}