Question

我正在创建一个联系表单，我正在用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/ 如果我不使用班级控制组，那就是小提琴：http://jsfiddle.net/WgAZC/1/

我选择器出了什么问题？

Answer 1

改变这个：

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

要：

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

#nimi不是.control-group元素的后代之一。

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

http://jsfiddle.net/tTBRx/

由于您按ID选择元素且ID是唯一的，因此无需使用其他选择器。

$('#nimi').addClass("error")

Answer 2

你在选择器之间放置了一个空格

.control-group #nimi

表示有一个id = nimi的元素，它是具有类.control-group

的元素的后代

正确的版本应为

.control-group#nimi

如果类和id都属于同一个元素。

Answer 3

在您的选择器中，在.control-group和#nimi之间放置一个空格会查找#nimi是.control-group的子元素，而不是进一步定义.control-group } 你要。试试这个：

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

CSS Selector Reference

jQuery表单验证

3 个答案: