Check if multiple textfields are empty jQuery

Question

This might be simple but I'm having difficulties here. I'm running the required attribute through all fields of .um_frm and then checking if all fields are not empty. My problem is that instead of checking ALL fields, it passes through even if a single field is filled. How do I make sure that all fields are filled?

$('#um_ok').on( 'click', function() {
      $('.um_frm').attr('required','required'); 
      var value=$.trim($(".um_frm").val()); 
      if(value.length === 0){
          //proceed...
      }
});

I also tried this but was not suiccessful

$('#um_ok').on( 'click', function() {
       $('.um_frm').attr('required','required'); 
       if($.trim($(".um_frm").val()) === ""){
           //proceed...
       }
 });

Please make a jsfiddle.

Razvan
– Razvan

2014-10-15 09:32:48 +00:00
Commented Oct 15, 2014 at 9:32 — Razvan
– Razvan, Commented Oct 15, 2014 at 9:32

iCollect.it Ltd · Accepted Answer · 2014-10-15 11:05:58Z

4

Use a filter to see if any field is blank (length not truthy, i.e. 0, hence the !):

$('#um_ok').on( 'click', function() {
      $('.um_frm').attr('required','required'); 

      var anyBlank = $(".um_frm").filter(function(){
          return !$.trim($(this).val()).length;
      }).length; 

      // If not any blanks...
      if(!anyBlank){
          //proceed...
      }
});

Update: (thanks @George)

As required is a genuine HTML element property and not just an attribute, you should use prop (which can then take the more readable Boolean value as its on/off state):

      $('.um_frm').prop('required', true);

This has the advantage of creating the cleaner required attribute with no value (instead of required="required" etc).

edited Oct 15, 2014 at 11:05

answered Oct 15, 2014 at 9:43

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

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

8 Comments

George Over a year ago

+1 An up-vote for an answer that actually deserves one. Make a note about using .prop() to set properties like required (:

George Over a year ago

@TrueBlueAussie I have no reference except this question. If you think logically, we don't care about the required attribute, we want to change the property because that is what causes required's behaviour.

Fergoso Over a year ago

@TrueBlueAussie The code does not run when I use prop.

iCollect.it Ltd Over a year ago

@George: hmm. Is that a browser compatibility thing?

Fergoso Over a year ago

I tried this using the latest version of chrome (v38)

|

iCollect.it Ltd · Accepted Answer · 2014-10-15 10:46:44Z

1

WORKING FIDDLE

Use following

$('#um_ok').on('click', function () {
    var status = true;
    $('.um_frm').each(function () {
        if ($.trim($(this).val()) == '') {
            status = false;
        }
    });
    if (status) {
        alert("all r ok");
    } else {
        alert("sumthng missing");
    }
});

edited Oct 15, 2014 at 10:46

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

answered Oct 15, 2014 at 9:38

Pratik Joshi

11.7k7 gold badges44 silver badges73 bronze badges

5 Comments

iCollect.it Ltd Over a year ago

This will alert/action once for every blank entry (quite annoying)... Better to maybe return an overall result and then report it?

iCollect.it Ltd Over a year ago

Better now (and I formatted it for you), but I would suggest using string values for a boolean state is not an appropriate thing to encourage. Just use true & false :)

Pratik Joshi Over a year ago

@TrueBlueAussie did. thnx

iCollect.it Ltd Over a year ago

+1: Got there in the end :) I still prefer filter to each, but the end result is the same).

Pratik Joshi Over a year ago

@Fergoso , it should ! Thanks

Mad Angle · Accepted Answer · 2014-10-15 09:48:33Z

0

Hope this will do

var left_blank =$('#um_ok').on( 'click', function() {
                    $(".um_frm").filter(function () {
                      return !$.trim($(this).val()).length;
                  }).length;
               });
if(!left_blank){
    //proceed
}

edited Oct 15, 2014 at 9:48

answered Oct 15, 2014 at 9:33

Mad Angle

2,3301 gold badge18 silver badges33 bronze badges

7 Comments

A. Wolff Over a year ago

Wait, how does it answer question?

George Over a year ago

You should either add the appropriate if statement afterwards, or explain to the OP what is going on here. As it stands, this code does nothing except evaluate a true or false value...

iCollect.it Ltd Over a year ago

You are not actually checking for blanks... you are checking for any non-blanks at the moment.

Mad Angle Over a year ago

I missed it actually :)

George Over a year ago

@BlankHead Your if statement will be carried out not when the button is clicked, but straight away, and never again. Also you need left_blank to have the value of the length property you get. You are assigning the jQuery object that you are attaching the handler to.

|

Collectives™ on Stack Overflow

Check if multiple textfields are empty jQuery

3 Answers 3

8 Comments

5 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

5 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related