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!

can you paste you html code? it would help – Dec 07 '11 at 01:49 — , Dec 07 '11 at 01:49
@ DorinDuminica @JesseB I just did. Thanks! – claras Dec 07 '11 at 03:10 — claras, Dec 07 '11 at 03:10

Šime Vidas · Answer 1 · 2011-12-07T01:58:57.463

21

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.

edited Dec 07 '11 at 01:58

answered Dec 07 '11 at 01:53

Šime Vidas

182,163
62
281
385

Siva · Accepted Answer · 2011-12-07T10:37:21.660

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.

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!! — claras, Dec 07 '11 at 07:43
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, Dec 07 '11 at 10:40
Changed the link for working code also so that you can check it directly. — Siva, Dec 07 '11 at 10:41

score 1 · Answer 3 · answered Mar 11 '23 at 17:51

This My Code

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

score 1 · Answer 4 · answered Dec 07 '11 at 01:51

1

Use the each() function (doc):

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

answered Dec 07 '11 at 01:51

talnicolas

13,885
7
36
56

Thanks! I think it should work but don't think it is. Would you mind taking a look at my edited question? – claras Dec 07 '11 at 03:12
@claras maybe you could put `class="required"` instead of the ids and the `input` elements and then access it with `$(".required").each...` – talnicolas Dec 07 '11 at 03:19

score 1 · Answer 5 · answered Dec 07 '11 at 01:58

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

score 0 · Answer 6 · answered Feb 06 '14 at 20:08

Simple, and for added measure add a red border

First make a style

.redborder { border: 2px solid red; }

Then a simple bit of 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;

checking each required input for empty value with jQuery

6 Answers6

Linked

Related