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

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

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

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

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 代码< /b>

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

这是我的代码

  $(document).ready(function() {
    $('button[type="submit"]').click(function(event) {
    $('[required]').each(function (i, el) {
        if ($(el).val() == '' || $(el).val() == undefined) {
            alert('Please fill in all mandatory fields!');
            event.preventDefault();
            return false;
        }
    });
  });
 });

Answer 6

简单，为了增加测量效果，添加一个红色边框，

首先制作一个样式

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