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

Question

我正在检查表单中的每个必填字段.我尝试了这个,但它只适用于第一个输入.如何使其适用于每个输入？

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>

所以我想在页面加载时以及每当它们发生变化时检查空字段.

顺便说一句,我没有围绕这些的表格标签,因为它是针对移动设备的,并不认为这是真的有必要,如果这有任何区别.

再次感谢!

Answer 1

这个？

$( ':input[required]', yourForm ).each( function () {
    if ( this.value.trim() !== '' ) {
        // ...
    }
});

其中yourForm是对FORM元素的引用(您也可以在此处使用选择器).这是上下文 - 您只想搜索表单内的字段.

Answer 2

"更改"事件适用于SELECT框和RADIO按钮元素,但不适用于INPUT元素.您必须使用"焦点/模糊"事件来处理输入字段,在您的情况下,"模糊"事件非常适合.

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

我按照上面的说明调整了你的代码块,检查一次,然后让我知道更新的代码是否也不适合你,更新代码块是:

HTML代码

<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>

JS代码

$('.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);
  }
});

您也可以在此处直接查看工作代码.