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

我有很多这样的输入：

纽扣：

 button 1 button 2 

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

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

再次感谢！

Answer 1

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

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

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

HTML代码

    button 1 button 2 

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

您也可以直接在这里查看工作代码。

Answer 2

这个？

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

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

Answer 3

使用each()函数（ doc ）：

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

Answer 4

你需要获取每个元素的值，如果所有元素都不为空，那么首先做一件事，如果它们中的任何一个是空的，那么做第二件事，对吗？

[未测试]

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

Answer 5

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

首先要做一个风格

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