使用jQuery检查每个必需输入的空值

我正在检查表单中的每个必填字段。我尝试过这个，但它只适用于第一次输入。我怎样才能使它适用于每个输入

if($('[required]').val() != ''){ 
        $('.button1').fadeIn(0);
        $('.button2').fadeOut(0);
}else{
    $('.button1').fadeOut(0);
    $('.button2').fadeIn(0);
}

编辑：为了了解更多上下文，我在下面提供了另一个函数，可以在它们更改和HTML代码时应用

$('[required]').change(function() {
if($('[required]').val() != ''){ 
        $('.button1').fadeIn(0);
        $('.button2').fadeOut(0);
    }else{
    $('.button1').fadeOut(0);
    $('.button2').fadeIn(0);
}
});

HTML

我有很多类似这样的输入：

<input type="text" id="title" name="title" value="" required>
<input type="text" id="size" name="size" value="" required>
<input type="text" id="length" name="length" value="" required>

按钮：

<a class="button1" style="display:none" >button 1</a>
<a class="button2">button 2</a>

按钮1
按钮2

因此，我想在页面加载时以及页面更改时检查空字段

顺便说一句，我没有一个表单标签，因为它是移动的，如果这有什么区别的话，我认为没有必要

再次感谢

使用

each（）

函数（）：

这个

---

其中

yourForm

是对表单元素的引用（您也可以在此处使用选择器）。这是上下文-您只希望搜索表单中的字段。

您需要获取每个元素的值，如果所有元素都不是空的，则执行第一件事，如果其中任何一个是空的，则执行第二件事，对吗

[未经测试]

// test if any of the values are not empty
var is_empty = false;
$('[required]').each( function(idx, elem) {
    is_empty = is_empty || ($(elem).val() == '');
});

// now do the thing, but only if ALL the values are not empty
if ( ! is_empty) {
    $('.button1').fadeIn(0);
    $('.button2').fadeOut(0);
}else{
    $('.button1').fadeOut(0);
    $('.button2').fadeIn(0);
}

“更改”事件适用于选择框和单选按钮元素，但不适用于输入元素。您必须使用“聚焦/模糊”事件来处理输入字段，在您的情况下，“模糊”事件非常适合

如果您想使用jQuery处理许多元素，那么最好使用基于类的操作，在您的情况下，只需为所有输入字段添加一个相同的类“required”，并使用该类对这些字段进行操作

我已按照上面的说明调整了您的代码块，请检查它们一次，然后让我知道更新的代码是否也不适用于您，更新的代码块是：

HTML代码

---

您还可以直接检查工作代码。

简单，对于添加的度量，请添加一个红色边框

先做一个样式

.redborder { border: 2px solid red; }

然后是一个简单的Javascript代码

// Remove all redborders
    $("#my_form :input.redborder").removeClass("redborder");
// Check all required fields have text, you can even check other values
    $("#my_form :input[required]").each(function() {
        if ($.trim($(this).val()) == "") $(this).addClass("redborder");
    });
// If any input has a red border, return
    if ($("#todo_edit_form .redborder").length > 0 ) return;

---

你能粘贴你的html代码吗？这会对我刚才说的“DorinDuminica@JesseB”有所帮助。谢谢谢谢我认为它应该有效，但不认为有效。你介意看一下我编辑的问题吗？@claras也许你可以用

class=“required”

代替ID和

input

元素，然后用

$（“.required”）访问它。每个…

都很酷，几乎可以用！无论何时填充其中任何一个字段，它都会更改为button2，即使并非所有必填字段都已填充。我尝试将“this”更改为“.required”，但似乎是随机工作的。我们能把每种方法结合起来吗？谢谢根据您的要求调整了JS逻辑并更新了我的帖子，现在“button1”只有在用户填写所有字段时才会出现，否则默认情况下会出现“button1”。还更改了工作代码的链接，以便您可以直接查看。

<input type="text" id="title" name="title" value="" class="required">
<input type="text" id="size" name="size" value="" class="required">
<input type="text" id="length" name="length" value="" class="required">

<a class="button1" style="display:none" >button 1</a>
<a class="button2">button 2</a>

$('.required').blur(function() {
  var empty_flds = 0;
  $(".required").each(function() {
    if(!$.trim($(this).val())) {
        empty_flds++;
    }    
  });

  if (empty_flds) {
    $('.button1').fadeOut(0);
    $('.button2').fadeIn(0);
  } else {
    $('.button1').fadeIn(0);
    $('.button2').fadeOut(0);
  }
});

.redborder { border: 2px solid red; }

// Remove all redborders
    $("#my_form :input.redborder").removeClass("redborder");
// Check all required fields have text, you can even check other values
    $("#my_form :input[required]").each(function() {
        if ($.trim($(this).val()) == "") $(this).addClass("redborder");
    });
// If any input has a red border, return
    if ($("#todo_edit_form .redborder").length > 0 ) return;