Question

我的管理面板中有一个表单，我在jQuery中的引用有点麻烦。

表单代码如下所示：

<div class="full-width">
    <label for="file_name-644" >File Name</label> 
    <span class="relative"><input type="text" name="file_name-644" id="file_name-644" class="full-width" disabled="disabled" value="pic.jpg"/><span ></span></span>
</div>
<div class="full-width">
    <label for="name-644" class="required">Name</label> 
    <span class="relative"><input type="text" name="name-644" id="name" value="" class="full-width name"/><span ></span></span>
</div>

现在，由于此表单可以同时处理多个条目，因此引号上的数字会发生变化（例如，从644到108）。这是用php循环创建的。

在jquery中，我使用.each()循环来检查值是否已填充。现在，我需要验证的只是名称的非空字段。目前，它看起来像这样：

$('.name').each(function(index) {
    if(!$(this).val()){ctr++;}else{error++;}
});

变量ctr和error是我后来用于指出错误或准备好处理的条目的计数器。

我想要添加的内容是对标签的更改只是为空的条目，以便突出显示。我知道我可以用
改变所有这些 $('.required').css({'color': '#AB1414'}); 但是我怎样才能在上面的.each()循环中执行此操作并仅针对空值？

提前致谢！

Answer 1

要在代码中使用.each()循环，您可以执行以下操作。请注意，它使用jQuery.trim()^(docs)来考虑只有空格的值也是空的。

使用prev()^(docs)它还会获得其parent()^(docs)的上一个<label>，但只有 <{em>}才能获得required类。然后在if()中，它会检查<label>对象的length^(docs)属性，看看是否确实存在required标签。

$('.name').each(function(index) { var $th = $(this); if( $th.parent().prev('.required').length && !$.trim( $th.val() ) ){ctr++;}else{error++;} });

Answer 2

您需要为输入字段添加所需的类而不是span，并在验证时使用此代码

 $('.required').each(function(){
       if ($(this).val() == '') $(this).css({'color': '#AB1414'});
    });

Answer 3

也许可以尝试HTML：

<div class="full-width nameContainer">
    <label for="name-644" class="required">Name</label> 
    <span class="relative"><input type="text" name="name-644" id="name" value="" class="full-width name"/><span ></span></span>
</div>

对于JS：

$('.nameContainer').each(function(index) {
    var value = $(".name", this).val();
    if(!value)
    {
      $('.required', this).css({'color': '#AB1414'});
      ctr++;
    }
    else
    {
      error++;
    }
});

在jQuery中获取正确的对象引用以使验证工作

3 个答案: