check if all input tags have value

Question

I want to perform some action if all the input fields have some some value. So I am checking wether the input field have value using length condition but its not working correctly

if($(".form-control:empty").length == 0){
            console.log('All are filled')
          
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="instance-dir"  placeholder="Instance Directory"  class="form-control"/>
<input type="text" id="Wroking-dir"  placeholder="Working directory"  class="form-control"/>

Next time please add the correct tags to your question. Seems like you are using jquery and not vanilla javascript. — Mihai T
– Mihai T, Commented Oct 21, 2020 at 9:35

T.J. Crowder · Accepted Answer · 2020-10-21 09:21:38Z

1

jQuery's :empty pseudo-selector checks for child nodes, it doesn't check for values. input elements never have child nodes (they're void elements).

CSS doesn't have a "input with no value" selector, and looking at jQuery's list, I don't see one that it adds. So you'll have to look through the elements, for instance:

if ($(".form-control").get().every(e => e.value))) {
    // Every `.form-control` has a non-blank value
}

answered Oct 21, 2020 at 9:21

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

8 Comments

kavya8 Over a year ago

some input will have value as undefined this case will be handled right?How can I check if value is not empty and undefined also

kavya8 Over a year ago

input value should not be empty andshould not have undefined as value

T.J. Crowder Over a year ago

@shee8 - By definition, an input element's value property is never undefined. It's always a string. But if it could be undefined, the check above would check for those too, because both "" and undefined are falsy values, and the above checks to see that every input has a truthy value.

T.J. Crowder Over a year ago

@shee8 - No, it doesn't: jsfiddle.net/tjcrowder/fr1qucns There must be an error in your test. (And again: The value of an input element is never undefined. Do you have non-input/select elements with .form-control?)

kavya8 Over a year ago

If I have a folder icon within input tag and if I browse within my local machine to select a folder and if I dont select one and click cancel instead of ok the value of input field is undefined

|

nick zoum · Accepted Answer · 2020-10-21 09:38:52Z

If your inputs have the required tag then you can use input:valid to check if its been filled out.

$('#check').on('click', function() {
  if (!$('input[type="text"]:not(:valid)').length) console.log('All are filled');
  else console.log('Some are missing');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="instance-dir" placeholder="Instance Directory" class="form-control" required />
<input type="text" id="Wroking-dir" placeholder="Working directory" class="form-control" required/>

<button id="check">Check</button>

Collectives™ on Stack Overflow

check if all input tags have value

2 Answers 2

8 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Related