How to check if all inputs are not empty with jQuery

Question

I need to validate a form with jQuery. I can check all my inputs one by one, but it's not a very practical solution.

How can i check if all my inputs are non-empty more efficiently? In my form i can have input elements of different types: text, several groups of radio, select etc.

write same class for all the fields you want to validate and then use then wirte $('.classname').val() != '' — swetha
– swetha, Commented Apr 25, 2013 at 10:06
possible duplicate of Checking if ALL form inputs are empty with jQuery hope it helps and I am not the down voter :) — Tats_innit
– Tats_innit, Commented Apr 25, 2013 at 10:07

horgh · Accepted Answer · 2016-06-16 01:44:22Z

67

Just use:

$("input:empty").length == 0;

If it's zero, none are empty.

To be a bit smarter though and also filter out items with just spaces in, you could do:

$("input").filter(function () {
    return $.trim($(this).val()).length == 0
}).length == 0;

edited Jun 16, 2016 at 1:44

horgh

18.6k22 gold badges70 silver badges125 bronze badges

answered Apr 25, 2013 at 10:12

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

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

2 Comments

Yeonho Over a year ago

:empty selector will not work as intended, as it is used to select all elements that have no children.

Derek Henderson Over a year ago

Your filter function should be return $.trim($(this).val()).length === 0.

Darren · Accepted Answer · 2013-04-25 10:05:30Z

32

Use each:

var isValid;
$("input").each(function() {
   var element = $(this);
   if (element.val() == "") {
       isValid = false;
   }
});

However you probably will be better off using something like jQuery validate which IMO is cleaner.

answered Apr 25, 2013 at 10:05

Darren

71.2k24 gold badges141 silver badges146 bronze badges

2 Comments

Darren Over a year ago

@ClémentAndraud - assign isValid = true before the each

Clément Andraud Over a year ago

I think there is a problem if i have several groups of radio button.

deviloper · Accepted Answer · 2013-04-25 10:15:28Z

16

$('#form_submit_btn').click(function(){
    $('input').each(function() {
        if(!$(this).val()){
            alert('Some fields are empty');
           return false;
        }
    });
});

answered Apr 25, 2013 at 10:15

deviloper

7,25210 gold badges52 silver badges79 bronze badges

Comments

elad silver · Accepted Answer · 2016-03-08 15:41:03Z

3

I just wanted to point out my answer since I know for loop is faster then $.each loop here it is:

just add class="required" to inputs you want to be required and then in jquery do:

$('#signup_form').submit(function(){
    var fields = $('input.required');
    for(var i=0;i<fields.length;i++){
        if($(fields[i]).val() != ''){
            //whatever
        }
    }
});

edited Mar 8, 2016 at 15:41

answered Apr 9, 2015 at 14:43

elad silver

9,7816 gold badges47 silver badges71 bronze badges

1 Comment

riddle_me_this Over a year ago

Minor point - technically, OP was asking for not empty. This checks for empty.

BritishSam · Accepted Answer · 2016-09-22 08:08:04Z

3

$('input').each(function() {
    if ($(this).val() != '') {
        console.log('all inputs filled');
    }
    else{
        console.log('theres an empty input');
        return false
    }
});

you might want to wrap this in a keyup function

answered Sep 22, 2016 at 8:08

BritishSam

1,0808 silver badges25 bronze badges

Comments

Brad Larson · Accepted Answer · 2014-08-20 22:20:24Z

You can do it.here is code

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{display:inline-block;height:20px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;}
textarea{height:auto;}
select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{background-color:#ffffff;border:1px solid #cccccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;}textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus{border-color:rgba(82, 168, 236, 0.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);height: 20px;}
select,input[type="radio"],input[type="checkbox"]{margin:3px 0;*margin-top:0;line-height:normal;cursor:pointer;}
select,input[type="submit"],input[type="reset"],input[type="button"],input[type="radio"],input[type="checkbox"]{width:auto;}
.uneditable-textarea{width:auto;height:auto;}
#country{height: 30px;}
.highlight
{
    border: 1px solid red !important;
}
</style>
<script>
function test()
{
var isFormValid = true;

$(".bs-example input").each(function(){
    if ($.trim($(this).val()).length == 0){
        $(this).addClass("highlight");
        isFormValid = false;
        $(this).focus();
    }
    else{
        $(this).removeClass("highlight");
    }
});

if (!isFormValid) { 
    alert("Please fill in all the required fields (indicated by *)");
}

  return isFormValid;
 }  
 </script>
</head>
 <body>
 <div class="bs-example">
<form onsubmit="return test()">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="text" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
   </form>
  </div>
 </body>
 </html>

Max Consul · Accepted Answer · 2018-07-25 03:20:23Z

1

var isValid = true;
$("#tabledata").find("#tablebody").find("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
else{
isValid = true;
}
}); 
console.log(isValid);

answered Jul 25, 2018 at 3:20

Max Consul

233 bronze badges

1 Comment

Ethan Over a year ago

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

ahmedg · Accepted Answer · 2020-06-23 11:00:01Z

1

You can achive this with Regex and Replace or with just trimming.

Regex example:

if ($('input').val().replace(/[\s]/, '') == '') {
    alert('Input is not filled!');
}

With this replace() function you replace white spaces with nothing (removing white spaces).

Trimming Example:

if ($('input').val().trim() == '') {
    alert('Input is not filled!');
}

trim() function removes the leading and trailing white space and line terminator characters from a string.

answered Jun 23, 2020 at 11:00

ahmedg

3091 gold badge3 silver badges12 bronze badges

Comments

brinch · Accepted Answer · 2018-05-11 06:58:11Z

0

Like this:

if ($('input[value=""]').length > 0) {
   console.log('some fields are empty!')
}

answered May 11, 2018 at 6:58

brinch

2,6248 gold badges36 silver badges59 bronze badges

3 Comments

Rahul Over a year ago

shouldn't it be == 0 ?

brinch Over a year ago

No. The query selector will select all empty fields with input[value=""], and thus if any empty fields length > 0.

Christopher King Over a year ago

This seems to work only when the value attribute is assigned when the HTML is rendered. In other words, if the value is initially empty and the user then enters something the selector will still include the field that was initially empty since the value attribute in the HTML doesn't get updated from input.

anon · Accepted Answer · 2022-01-15 19:15:07Z

-2

let timer $('input').on('input change', function () { $('input').each(function () { clearTimeout(timer) timer = setTimeout(() => { if ($(this).val() != '') { console.log('all inputs filled'); } else { console.log('theres an empty input'); return false } }, 0) }) })

answered Jan 15, 2022 at 19:15

anon

1

1 Comment

Tyler2P Over a year ago

Please don't post only code as an answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

Collectives™ on Stack Overflow

How to check if all inputs are not empty with jQuery

10 Answers 10

2 Comments

2 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

2 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related