用jQuery检查每个需要输入的空值 [英] checking each required input for empty value with jQuery

问题描述

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

  if（$（'[required]'）。val（）！=''）{
 $（  .button1' ）淡入（0）。 
 $（'。button2'）。fadeOut（0）; 
} else {
 $（'。button1'）。fadeOut（0）; 
 $（'。button2'）。fadeIn（0）; 
 
 $ / code> 

编辑：对于更多的上下文，这是另一个函数

  $（'[required]'）。change（function（ ）{
 if（$（'[required]'）。val（）！=''）{
 $（'。button1'）。fadeIn（0）; 
 $（' .button2'）。fadeOut（0）; 
} else {
 $（'。button1'）。fadeOut（0）; 
 $（'。button2'）。fadeIn（0） ; 
} 
}）; 
  

HTML
<

 < input type =textid =titlename =标题值=需要> 
< input type =textid =sizename =sizevalue =required> 
< input type =textid =lengthname =lengthvalue =required> 
  

按钮：

 < a class =button1style =display：none>按钮1< / a> 
< a class =button2>按钮2< / a> 
  

所以我想在页面加载时以及每次改变时检查空字段。

顺便说一句，我没有一个表格标签，因为它是针对手机的，并不认为它是真的必要的，如果这样做有什么区别的话。

再次感谢！

解决方案

change事件适用于SELECT框和RADIO按钮元素但不适用于INPUT元素。您必须使用焦点/模糊事件来处理输入字段，在这种情况下，模糊事件非常适合。

如果要处理多个使用jQuery的元素，那么最好使用基于CLASS的操作，在你的情况下，只需为所有输入字段添加一个required类并对那些使用该类的字段进行操作。

我按照上面指定的方式调整了您的代码块，请检查一次，然后让我知道更新的代码是否也不适合您，更新代码块为：

HTML代码

 < input type =textid = titlename =titlevalue =class =required> 
< input type =textid =sizename =sizevalue =class =required> 
< input type =textid =lengthname =lengthvalue =class =required> 
 
< a class =button1style =display：none>按钮1< / a> 
< a class =button2>按钮2< / a> 
  

JS代码

（函数（）{
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）;
}
}）;

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

I am checking for each required fields in a form. I tried this but it only works for the first input. How can I make it work for each input?

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

EDIT: for more context, here's another function I had below this to apply whenever they change and HTML code.

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

HTML

I have bunch of inputs like these:

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

buttons:

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

So I want to check for empty fields when it the page loads and whenever they change.

BTW, I don't have a form tag around these because it's for mobile and didn't think it's really necessary, if that makes any difference.

Thanks again!

解决方案

The "change" event works for the SELECT box and RADIO button elements but not for the INPUT elements. You've to use the "focus/blur" events for handling the input fields, in your case the "blur" event suits perfectly.

If you want to process many elements using jQuery then it's better to go with the CLASS based operations, in your case just add a same class "required" for all the input fields and make the operations on those fields using that class.

I've adjusted your code blocks as I specified above, check them once and then let me know if the updated code also not working for you, updates code blocks are:

HTML Code

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

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

You can also check the working code directly here.

这篇关于用jQuery检查每个需要输入的空值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！