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, Apr 25 '13 at 10:06
possible duplicate of [Checking if ALL form inputs are empty with jQuery](http://stackoverflow.com/questions/10517315/checking-if-all-form-inputs-are-empty-with-jquery) hope it helps and I am not the down voter `:)` — Tats_innit, Apr 25 '13 at 10:07

score 66 · Accepted Answer · edited Jun 16 '16 at 01:44

66

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 '16 at 01:44

horgh

17,918
22
68
123

answered Apr 25 '13 at 10:12

Mathew Thompson

55,877
15
127
148

34

:empty selector will not work as intended, as it is used to select all elements that have no children. – Yeonho Feb 02 '14 at 06:21
5

Your filter function should be `return $.trim($(this).val()).length === 0`. – Derek Henderson Jun 02 '16 at 16:57

score 31 · Answer 2 · answered Apr 25 '13 at 10:05

31

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 '13 at 10:05

Darren

68,902
24
138
144

1

@ClémentAndraud - assign isValid = true before the `each` – Darren Apr 25 '13 at 10:19
I think there is a problem if i have several groups of radio button. – Clément Andraud Apr 25 '13 at 10:22

score 14 · Answer 3 · answered Apr 25 '13 at 10:15

14

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

answered Apr 25 '13 at 10:15

M Reza Saberi

7,134
9
47
76

elad silver · Answer 4 · 2016-03-08T15:41:03.663

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 08 '16 at 15:41

answered Apr 09 '15 at 14:43

elad silver

9,222
4
43
67

1

Minor point - technically, OP was asking for not empty. This checks for empty. – riddle_me_this Jan 12 '16 at 15:00

score 3 · Answer 5 · answered Sep 22 '16 at 08:08

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 '16 at 08:08

BritishSam

1,070
8
24

score 2 · Answer 6 · edited Aug 20 '14 at 22:20

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>

score 1 · Answer 7 · answered Jul 25 '18 at 03:20

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 '18 at 03:20

Max Consul

23
3

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. – Ethan Jul 25 '18 at 04:52

score 1 · Answer 8 · answered Jun 23 '20 at 11:00

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.

score 0 · Answer 9 · answered May 11 '18 at 06:58

0

Like this:

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

answered May 11 '18 at 06:58

brinch

2,544
7
33
55

shouldn't it be == 0 ? – Rahul May 25 '20 at 10:07
No. The query selector will select all empty fields with `input[value=""]`, and thus if any empty fields `length > 0`. – brinch May 26 '20 at 09:38
1

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. – Christopher King Sep 08 '20 at 14:38

score -2 · Answer 10 · answered Jan 15 '22 at 19:15

-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 '22 at 19:15

anon

1

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. – Tyler2P Jan 15 '22 at 21:50

How to check if all inputs are not empty with jQuery

10 Answers10

Linked

Related