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

xbp102n0  于 2023-03-17  发布在  jQuery
关注(0)|答案(6)|浏览(140)

我正在检查表单中的每个必填字段。我尝试过这个方法,但它只对第一个输入有效。我如何使它对每个输入都有效?

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

EDIT:对于更多的上下文,这里有另一个函数,我在下面这个应用时,他们改变和HTML代码。

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

超文本标记语言

我有一堆这样的输入:

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

因此,我想检查空字段时,它的网页加载和每当他们改变。
顺便说一句,我没有一个形式标签,因为它是为移动的,并不认为这是真的有必要,如果这有什么不同。
再次感谢!

qlzsbp2j

qlzsbp2j1#

这个?

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

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

i7uaboj4

i7uaboj42#

“change”事件适用于SELECT框和RADIO按钮元素,但不适用于INPUT元素。您必须使用“focus/blur”事件来处理输入字段,在您的情况下,“blur”事件非常适合。
如果您想使用jQuery处理许多元素,那么最好使用基于类的操作,在您的情况下,只需为所有输入字段添加一个相同的类“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);
  }
});

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

nr7wwzry

nr7wwzry3#

使用each()函数(doc):

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

2w2cym1i4#

您需要获取每个元素的值,如果所有元素都不为空,则执行第一项操作,如果任何元素为空,则执行第二项操作,对吗?
[未测试]

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

ddarikpa5#

简单,对于添加的度量,添加红色边框
先做一个样式

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

kse8i1jr6#

这是我的代码

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

相关问题