Question

我正在构建一个联系表单，我遇到了jQuery的问题。我想选择有错误的特定输入字段并应用类err。不幸的是，我的代码在出错时选择所有输入。我无法确定哪部分逻辑是错误的。

$('#send_mail').click(function(){
    $("#contact_body").find('label').each(function(){
        var contact_label = $('input[required=true], textarea[required=true]'); 
        var label_check = $(this).find(contact_label);
        $(contact_label).removeClass('err');
        if (!$.trim($(label_check).val())){
            $(contact_label).addClass('err');
        }
    });
});

我的HTML的顺序如下：

#contact_body
<label>
  <input>
</label>

Answer 1

这会选择所有input和textarea元素：

var contact_label = $('input[required=true], textarea[required=true]');

相反，您应该将其限制在标签中的元素：

var contact_label = $(this).find('input[required=true], textarea[required=true]');

请注意，$(contact_label)和contact_label在您的代码中是等效的，以及$(label_check)和label_check。

此外，您可以使用 toggleClass() 的state参数来简化此操作：

contact_label.removeClass('err'); if (!$.trim(label_check.val())){ contact_label.addClass('err'); }

......对此：

contact_label.toggleClass('err', !$.trim(label_check.val()));

这是更新后的活动：

$('#send_mail').click(function(){ $('#contact_body').find('label').each(function(){ var contact_label = $(this).find('input[required=true], textarea[required=true]'); var label_check = $(this).find(contact_label); contact_label.toggleClass('err', !$.trim(label_check.val())); }); });

Answer 2

我认为如果你改变了这一行，原始代码就可以了：

$(contact_label).addClass('err');

对此：

$(label_check).addClass('err');

因为$(contact_label)引用了所有必需的输入，而$(label_check)仅引用了要检查的输入。

但是您的代码可以简化，并且您对$()进行了不必要的调用，为它提供了一个已经是JQuery对象的参数。

我也没有看到你需要循环标签。您可以改为遍历所需的输入。

$('#send_mail').click(function(){
    $("#contact_body").find(':input[required]').each(function() {
        var $input = $(this);
        $input.removeClass('err');
        if (!$.trim($input.val())){
            $input.addClass('err');
        }
    });
});

使用.toggleClass()函数可以缩短：

$('#send_mail').click(function(){
    $("#contact_body").find(':input[required]').each(function() {
        $(this).toggleClass('err', !$.trim($input.val()));
    });
});

注意：

选择器':input'匹配<input>，<select>和<textarea>元素。

Answer 3

这是一种略有不同的方法。提供更多灵活性。

arr = ['first', 'last', 'email', 'msg']; //IDs of fields to check

$('#send_mail').click(function(){
  $('input, textarea').removeClass('err');

  for (var i=0; i<arr.length-1; i++) { //Loop through all field IDs
     if ( $('#'+arr[i]).val() == '' ) {
        $('#'+arr[i]).addClass('err').focus();
        return false;
     }
  }
  //AJAX to send email goes here
  alert('Email sent');
});

.err{background:yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<label for="first">First Name:</label>
<input id="first" type="text" required /><br>
<label for="last">Last Name:</label>
<input id="last" type="text" required/><br>
<label for="email">Email:</label>
<input id="email" type="email" required /><br>
<label for="msg">Message:</label>
<textarea id="msg" required></textarea>

<button id="send_mail">Send</button>

Answer 4

你可以简化代码，错误会少一些：

$('#send_mail').click(function(){
    $("#contact_body").find('label').each(function(){
        var field = $(this).find('[required=true]'); 

        if ($.trim($(field).val())){
            $(this).removeClass('err');
        } 
    });
});

在div中选择特定元素？

4 个答案: