Geek Answers Handbook

Validating each required input for an empty value with jQuery

I check every required field on the form. I tried this, but it only works for the first input. How can I make it work for every input?

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

EDIT : for more context, here is another function that I used below to apply when 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 a set of such inputs:

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

So, I want to check the empty fields when the page loads and when they change.

By the way, I do not have a form tag, because it is for mobile devices and did not think that it is really necessary, if that matters.

Thanks again!

+5
source share
5

"change" SELECT RADIO, INPUT. "focus/blur" , "" .

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

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

.

+7

?

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

yourForm FORM ( ). - .

+16

Use the each()( doc ) function :

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

You need to capture the value of each element, and if ALL of them are not empty, do the first, and if ANY of them is empty, do the second thing, fix it?

[unverified]

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

Simple, and for added measure add a red border

Make style first

.redborder { border: 2px solid red; }

Then a simple javascript bit

// 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;
0
source

More articles:


All Articles