0

お問い合わせフォームを作成し、jQueryで検証しています。ただし、クラスを使用する.control-groupと、コードは何もしません。しかし、私がそれを使わなければ、それはうまくいきます.control-group。これが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>​

そして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;    
        }
    });
});​

そしてこれについてのフィドル：http：//jsfiddle.net/GDXCE/ そして私がクラスcontrol-groupを使用しない場合のフィドル：http：//jsfiddle.net/WgAZC/1/

セレクターで何が間違っているのですか？

4

3 に答える 3

2

これを変える：

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

に：

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

#nimi.control-groupあなたの要素の子孫の1つではありません。

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

http://jsfiddle.net/tTBRx/

IDで要素を選択しており、IDは一意であるため、他のセレクターを使用する必要はありません。

$('#nimi').addClass("error")
于 2012-10-07T15:47:31.770 に答える
1

セレクターの間にスペースを入れています

.control-group #nimi

クラス.control-groupを持つ要素の子孫であるid=nimiの要素があることを意味します

正しいバージョンは

.control-group#nimi

クラスとIDの両方が同じ要素に属している場合。

于 2012-10-07T15:47:14.110 に答える
0

.control-groupセレクターでは、と#nimiが検索する間にスペースを入れると、必要なものをさらに定義するのではなく、#nimiの子要素になります。これを試して：.control-group.control-group

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

CSSセレクタリファレンス

于 2012-10-07T15:51:48.553 に答える