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($(\'[require         


        

Answer 1

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;

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

Use the each() function (doc):

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