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](http://jsfiddle.net). – Razvan Oct 15 '14 at 09:32 — Razvan, Oct 15 '14 at 09:32

iCollect.it Ltd · Accepted Answer · 2014-10-15T11:05:58.553

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 '14 at 11:05

answered Oct 15 '14 at 09:43

iCollect.it Ltd

92,391
25
181
202

3

+1 An up-vote for an answer that actually deserves one. Make a note about using `.prop()` to set properties like `required` (: – George Oct 15 '14 at 09:46
@TrueBlueAussie I have no reference except [this question](http://stackoverflow.com/a/5876747/1612146). 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. – George Oct 15 '14 at 09:56
@TrueBlueAussie The code does not run when I use `prop`. – Fergoso Oct 15 '14 at 10:15
@George: hmm. Is that a browser compatibility thing? – iCollect.it Ltd Oct 15 '14 at 10:17
I tried this using the latest version of chrome (v38) – Fergoso Oct 15 '14 at 10:34
@Fergoso: I would like to get a definitive result on the `required` `prop` vs `attr` that was suggested. Do you have some sample HTML or a JSFiddle I can test with? – iCollect.it Ltd Oct 15 '14 at 10:38
@TrueBlueAussie Here's the [Fiddle](http://jsfiddle.net/8LLLucoe/) . Wired... I just created this and it works. Not sure what is the difference between mine and the example fiddle. But I got mine to work so all good for the moment. Let's see in future... Thanks again. – Fergoso Oct 15 '14 at 11:02
@Fergoso: Yep, it looks like `prop` is the way to go with required. Also creates the cleaner `required` attribute with no value as a bonus. I'd have to see your actual page to see why it failed there, but I'm now confident enough to suggest it as a guideline again :) – iCollect.it Ltd Oct 15 '14 at 11:05

score 1 · Answer 2 · edited Oct 15 '14 at 10:46

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 '14 at 10:46

iCollect.it Ltd

92,391
25
181
202

answered Oct 15 '14 at 09:38

Pratik Joshi

11,485
7
41
73

2

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 Oct 15 '14 at 09:40
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 :) – iCollect.it Ltd Oct 15 '14 at 09:56
@TrueBlueAussie did. thnx – Pratik Joshi Oct 15 '14 at 10:01
+1: Got there in the end :) I still prefer `filter` to `each`, but the end result is the same). – iCollect.it Ltd Oct 15 '14 at 10:01
@Fergoso , it should ! Thanks – Pratik Joshi Oct 15 '14 at 11:17

Mad Angle · Answer 3 · 2014-10-15T09:48:33.543

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 '14 at 09:48

answered Oct 15 '14 at 09:33

Mad Angle

2,347
1
15
33

3

Wait, how does it answer question? – A. Wolff Oct 15 '14 at 09:37
3

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... – George Oct 15 '14 at 09:37
You are not actually checking for blanks... you are checking for any *non-blanks* at the moment. – iCollect.it Ltd Oct 15 '14 at 09:49
I missed it actually :) – Mad Angle Oct 15 '14 at 09:51
FYI zero/non-zero checks can be reduced to truthy/falsy checks (e.g. `!length` rather than `!length > 0`), but then your answer will look exactly like mine :) – iCollect.it Ltd Oct 15 '14 at 09:52
1

@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. – George Oct 15 '14 at 09:57
Looks like a case on one-too-many edits now. You have now assigned a jQuery selector result (element `#um_ok`) to `left_blank`. :( – iCollect.it Ltd Oct 15 '14 at 10:05

Check if multiple textfields are empty jQuery

3 Answers3