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

checking each required input for empty value with jQuery

提问by claras

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.

编辑：对于更多上下文，这是我在此之下的另一个函数，可在它们更改和 HTML 代码时应用。

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

HTML

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!

再次感谢！

回答by ?ime Vidas

This?

这个？

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

where yourFormis a reference to the FORM element (you can also use a selector here). This is the context - you only want to search for fields insidethe form.

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

回答by Siva

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.

“更改”事件适用于 SELECT 框和 RADIO 按钮元素，但不适用于 INPUT 元素。您必须使用“focus/blur”事件来处理输入字段，在您的情况下，“blur”事件非常适合。

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.

如果您想使用 jQuery 处理许多元素，那么最好使用基于 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

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 Code

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);
  }
});

You can also check the working code directly here.

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

回答by talnicolas

Use the each()function (doc):

使用each()函数（doc）：

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

回答by Benjam

You need to grab the value of each element, and if ALL of them are not empty, do the first thing, and if ANY of them are empty, do the second thing, correct?

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

[untested]

[未经测试]

// 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);
}

回答by Justin Levene

Simple, and for added measure add a red border

简单，并为增加的措施添加一个红色边框

First make a style

首先做一个样式

.redborder { border: 2px solid red; }

Then a simple bit of Javascript

然后是一些简单的 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;