check if all input field has value jQuery condition

Question

i have several input fields with a class name of required.

i have a code below to check if all my <input> fields have a value, if not empty or null, it will show/unhide a specific div.

but it doest seem to work on me.

also, by default, #print is displayed as none via CSS.

<!-- index.php -->

<input type="text" id="getID" class="required form-control" placeholder="id">
<input type="text" id="getName" class="required form-control" placeholder="name">

<!-- script.js -->

$(document).ready(function() { 
  $('input.required').each(function() { 
    if($(this).val() != "") {
        $("#print").show();
    }
    else {
        $("#print").hide();
    }
  });
});

You haven't given the inputs any value and the validation is running on $(document).load(), you could try binding it to a click or a submit event instead — Jamie Taylor
– Jamie Taylor, Commented Sep 30, 2013 at 15:48

David Thomas · Accepted Answer · 2013-09-30 16:06:22Z

2

I'd suggest:

$('#print').toggle(!($('input.required').length == $('input.required').filter(function () {
        return this.value;
    }).length));

Simplified JS Fiddle demo.

Obviously this should be run on submit, assuming you want to only show the #print element as a validation prior to submission.

References:

filter().
toggle().

edited Sep 30, 2013 at 16:06

answered Sep 30, 2013 at 15:51

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

Comments

Jamie Taylor · Accepted Answer · 2013-09-30 15:58:49Z

As I stated in my comment above, you're checking the values when the page loads, before the user has any chance to enter anything. If you have a button on your page, bind the event to that which will fire the function at the right time.

Something a little like this jFiddle

index.php

<input type="text" id="getID" class="required form-control" placeholder="id">
<input type="text" id="getName" class="required form-control" placeholder="name">
<div id="button">Submit</div>
<div id="print">You're missing something D:!</div>

script.js

$('#button').on('click', function() { 
    $('#print').hide();
    var error=false;
    $('input.required').each(function() { 
        if($(this).val() == "") {
            error=true;
        }
    });
    if(error) {
        $('#print').show();   
    }
});

But the check is inside an each so the #print div will be visible according to the last input validation

Arun P Johny · Accepted Answer · 2013-09-30 15:48:26Z

Try

$(document).ready(function () {
    //the default state
    var valid = true;
    $('input.required').each(function () {
        //if the value of the current input is blank then the set is invalid and we can stop the iteration now
        if ($.trim(this.value) == '') {
            valid = false;
            return false;
        }
    });
    //set the visibility of the element based on the value of valid state
    $("#print").toggle(!valid);
});

Collectives™ on Stack Overflow

check if all input field has value jQuery condition

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related