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

user497849
– user497849

2011-12-07 01:49:03 +00:00
Commented Dec 7, 2011 at 1:49 — user497849
– user497849, Commented Dec 7, 2011 at 1:49
@ DorinDuminica @JesseB I just did. Thanks!

claras
– claras

2011-12-07 03:10:43 +00:00
Commented Dec 7, 2011 at 3:10 — claras
– claras, Commented Dec 7, 2011 at 3:10

Šime Vidas · Accepted Answer · 2011-12-07 01:58:57Z

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 7, 2011 at 1:58

answered Dec 7, 2011 at 1:53

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Siva · Accepted Answer · 2011-12-07 10:37:21Z

7

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.

edited Dec 7, 2011 at 10:37

answered Dec 7, 2011 at 6:23

Siva

1,1332 gold badges14 silver badges26 bronze badges

3 Comments

claras Over a year ago

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 Over a year ago

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 Over a year ago

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

talnicolas · Accepted Answer · 2011-12-07 01:51:15Z

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 7, 2011 at 1:51

talnicolas

14.1k7 gold badges38 silver badges56 bronze badges

2 Comments

claras Over a year ago

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

talnicolas Over a year ago

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

Benjam · Accepted Answer · 2011-12-07 01:58:52Z

1

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

answered Dec 7, 2011 at 1:58

Benjam

5,3663 gold badges31 silver badges37 bronze badges

Comments

johndivam · Accepted Answer · 2023-03-11 17:51:58Z

1

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

answered Mar 11, 2023 at 17:51

johndivam

272 bronze badges

Comments

Justin Levene · Accepted Answer · 2014-02-06 20:08:45Z

0

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;

answered Feb 6, 2014 at 20:08

Justin Levene

1,69919 silver badges19 bronze badges

Collectives™ on Stack Overflow

checking each required input for empty value with jQuery

6 Answers 6

Comments

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related