Question

我在Div中有5个文本框，div和文本框是使用jquery动态创建的，我需要验证文本框是否有值或null，如果div中的一个文本框是NULL，则错误消息将显示在span，SPAN标签也放在div内。当文本框为空时，该文本框也会变为红色，该部分有效，但是消息错误有问题。有什么想法吗？

这是HTML

 <div id="QuestionTBDiv1" >
    <label>Question</label><br/>
    <input type="text" name="quiztxtBox[]" size="57" id="quiztxtBox[]" placeholder="Question #1"><br/>
    <label>Answer</label><br/>
    <input type="text" name="quiztxtBox[]" size="24" id="answer[]" placeholder="Choice A">&nbsp;<input type="radio" class = "choiceA" name="correct_answer1" value="A">&nbsp;<input type="text" name="quiztxtBox[]" size="24" id="answer[]" placeholder="Choice B">&nbsp;<input type="radio" class = "choiceB" name="correct_answer1" value="B"><br/><input type="text" name="quiztxtBox[]" size="24" id="answer[]" placeholder="Choice C">&nbsp;<input type="radio" class = "choiceC" name="correct_answer1" value="C">&nbsp;<input type="text" name="quiztxtBox[]" size="24" id="answer[]" placeholder="Choice D">&nbsp;<input type="radio" class = "choiceD" name="correct_answer1" value="D"><br><span name="errMchoice" class="errorMsg"></span>
        </div>

这就是JQUERY

 $("[name='quiztxtBox[]']").each(function(){
          if ($(this).empty()) {

            $(this).css({"background-color":"#f6d9d4"});
            $( "div span:last-child" ).html("This is error message.");
          }
        });

Answer 1

.empty()方法删除所选元素的子项（ childNodes ），但不检查value属性的长度。因为它返回一个jQuery对象而不是 boolean 值，而在JavaScript中，一个对象是一个真值，你的条件总是true，你应该检查值的长度。

另请注意，$( "div span:last-child" )会选择文档中的所有div span:last-child元素。您可以使用.siblings()方法选择目标元素。

if ( !this.value.length )
   // selecting the sibling `span` for showing the message 
   $(this).css(...).siblings('span.errorMsg').text('Read the docs!');

Answer 2

$（“div span：last-child”）。html（“这是错误信息。”）;

我想这应该是

$( "div span" ).text("This is error message.");

或

$( "div:last-child" ).text("This is error message.");

因为span是div的最后一个孩子，也是span旁边唯一的div元素。而且，.text因为您设置的值不是HTML内容而是文本内容。希望这有帮助！

验证div JQUERY中的文本框

2 个答案: