checking each required input for empty value with jQuery

Question

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.

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

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!

Solution 1

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.

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.

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

<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

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

Solution 2

This?

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

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

Solution 3

Use the each() function (doc):

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

Solution 4

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

View more solutions

Comments

[claras]

Thanks! I think it should work but don't think it is. Would you mind taking a look at my edited question?

[talnicolas]

@claras maybe you could put class="required" instead of the ids and the input elements and then access it with $(".required").each...

[claras]

Cool, almost works! It changes to button2 whenever any one of them is filled, even though not all required fields are filled. I tried changing 'this' to '.required' but seems to work randomly. Can we combine .each method with it somehow? Thanks!!

[Siva]

Adjusted the JS logic according to your requirement and updated my post, now the "button1" will appear only if the user filled all the fields otherwise by default "button1" will appear.

[Siva]

Changed the link for working code also so that you can check it directly.