How to properly check if all form elements are filled with JavaScript

Question

I have a form:

<form action="process.php" method="POST" enctype="multipart/form-data" id="add_prod_form">
Item Name: <input type="text" name="add_prod_name" id="add_prod_name"/><br /><br />
Image 1: <input type="file" name="add_prod_image[]" id="add_prod_image"/><br /><br />
Image 2: <input type="file" name="add_prod_image[]" /><br /><br />
Image 3: <input type="file" name="add_prod_image[]" /><br /><br />
Image 4: <input type="file" name="add_prod_image[]" /><br /><br />
Image 5: <input type="file" name="add_prod_image[]" /><br /><br />
Short description:<br />
<textarea rows="7" cols="50" name="add_prod_description_short" id="add_prod_description_short"/></textarea><br />
Long description:<br />
<textarea rows="7" cols="50" name="add_prod_description_long" id="add_prod_description_long"/></textarea><br /><br />
Price: <input type="text" name="add_prod_price" id="add_prod_price"/><br /><br />
<input type="hidden" name="action" value="add_product" />
<input type="submit" name="submit" id="add_prod_submit" disabled="disabled">

And I have a small script:

<script>
$('#add_prod_name, #add_prod_image, #add_prod_description_short, #add_prod_description_long, #add_prod_price').keyup(function() {
    if(allFilled()){
         $('#add_prod_submit').removeAttr('disabled');
    }
});

function allFilled() {
    var filled = true;
    $('#add_prod_form input, #add_prod_form textarea').each(function() {
        if($(this).val() == '') filled = false;
    });
    return filled;
}

</script>

What I am expecting is that once all the fields are filled, the submit button becomes available.It does not. Unfortunately I can't just check all the "body input" elements as there is another form on the same page. I have a feeling my problem lies somewhere in the $('#add_prod_form input, #add_prod_form textarea').each(function() section but I have tried about 100 ways and nothing works.

I am currently adapting code I found here

You may not always have five product images, so it would be understandable if at least one is left empty. — Ja͢ck, May 08 '15 at 04:47
Give your form an id (Let's say `myForm`), then limit the selector to only the children of that form — Quan To, May 08 '15 at 04:47
Yeah, I see it now, then just limit to `add_prod_form` then :D — Quan To, May 08 '15 at 04:49
Isn't that what I have done? $('#add_prod_form input, #add_prod_form textarea').each(function() — Matthew Goulart, May 08 '15 at 04:49
It's not... "Unfortunately I can't just check all the "body input" elements as there is another form on the same page." — Matthew Goulart, May 08 '15 at 04:50
Are you using the console debugger? Putting breakpoints? Do you get the expected results if you put `console.log($(this).val())` inside your `each` loop? — azium, May 08 '15 at 04:52
Yeah, but you inspect them all when you use `#add_prod_form input` selector. — Ja͢ck, May 08 '15 at 04:53
Fix what? Whats your intended goal? Do you need all the images filled in or just some? — azium, May 08 '15 at 04:56

Ja͢ck · Accepted Answer · 2015-05-08T05:16:24.067

You have some fields in your form that may be empty, such as the remaining four file input elements.

Since you already have a fixed list of fields onto which you attach an event handler, you could reuse that when you perform the checks as well:

jQuery(function($) {
  var $fields = $('#add_prod_name, #add_prod_image, #add_prod_description_short, #add_prod_description_long, #add_prod_price');
  
  $fields.on('keyup change', function() {
    if (allFilled($fields)) {
       $('#add_prod_submit').removeAttr('disabled');
    }
  });

  function allFilled($fields) 
  {
    return $fields.filter(function() {
      return this.value === ''; 
    }).length == 0;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="process.php" method="POST" enctype="multipart/form-data" id="add_prod_form">
Item Name: <input type="text" name="add_prod_name" id="add_prod_name"/><br /><br />
Image 1: <input type="file" name="add_prod_image[]" id="add_prod_image"/><br /><br />
Image 2: <input type="file" name="add_prod_image[]" /><br /><br />
Image 3: <input type="file" name="add_prod_image[]" /><br /><br />
Image 4: <input type="file" name="add_prod_image[]" /><br /><br />
Image 5: <input type="file" name="add_prod_image[]" /><br /><br />
Short description:<br />
<textarea rows="7" cols="50" name="add_prod_description_short" id="add_prod_description_short"/></textarea><br />
Long description:<br />
<textarea rows="7" cols="50" name="add_prod_description_long" id="add_prod_description_long"/></textarea><br /><br />
Price: <input type="text" name="add_prod_price" id="add_prod_price"/><br /><br />
<input type="hidden" name="action" value="add_product" />
<input type="submit" name="submit" id="add_prod_submit" disabled="disabled">

Further improvement could be made by adding a class to each required field, so that can reduce the size of your selector and make it easier to later add fields without having to edit your code.

This is a good answer, the only thing I would change is to simply use a single class on all the elements that need to be checked. — azium, May 08 '15 at 05:00
I like the idea azium. I'm going to clean it up. Thanks to both of you! — Matthew Goulart, May 08 '15 at 05:02
@Jack. Will this work if I upload image at the _last_ ? Does a `` has a `keyup` event? — Zee, May 08 '15 at 05:02
@Sourabh- You would probably need a more generic onchange handler for that. — Ja͢ck, May 08 '15 at 05:03
@Ja͢ck Thnks :) Then this is a scenario where Matthew Goulart's code will fail if the user choose to upload the image at the last(just saying). — Zee, May 08 '15 at 05:05
@Sourabh- Fixed that in the answer; it now checks for both events :) — Ja͢ck, May 08 '15 at 05:14

Sougata Bose · Answer 2 · 2015-05-08T04:59:22.107

4

When you are searching for the for inputs it will also include the submit button which has no value or null. It should be -

$('#add_prod_form input, textarea').not('#add_prod_submit').each(function(){ ...

Working Demo

edited May 08 '15 at 04:59

answered May 08 '15 at 04:53

Sougata Bose

31,517
8
49
87

Then his problem is not what he was saying. Nice – Quan To May 08 '15 at 04:58
@btquanto You are right. The problem is something else. – Sougata Bose May 08 '15 at 04:59
@btquanto no you're not right. he knew where his problem was and he knew he was being too general when selecting elements. he just didn't know how to select properly – azium May 08 '15 at 05:01

score 1 · Answer 3 · answered May 08 '15 at 05:00

Thanks everyone.

My problem, as Jack pointed out, was that I was looping through all the #add_prod_form input.

i changed

function allFilled() {
    var filled = true;
    $('#add_prod_form input, #add_prod_form textarea').each(function() {
        if($(this).val() == '') filled = false;
    });
    return filled;
}

to

function allFilled() {
    var filled = true;
    $('#add_prod_name, #add_prod_image, #add_prod_description_short, #add_prod_description_long, #add_prod_price').each(function() {
        if($(this).val() == '') filled = false;
        console.log($(this).val())
    });
    return filled;
}

Thanks!!!

Good luck. My one suggestion would be to add a class like `validate` to all of the inputs you want to check then just select with `$('.validate').each(..)` otherwise your current selector will get too long if you keep adding inputs — azium, May 08 '15 at 05:03

Ritesh Dhuri · Answer 4 · 2015-05-08T05:28:52.963

don't use javascript to validate form, place all inputs inside and form tag will validate it's elements. but important thing is form validation is done only on submit button. without button type submit form will not be validate. and also this validation is client side in this html form validate first and then submit the form.

Here is my code, i removed your javascript, removed disabled form submit button and change input type for price to number. wrap all elements which you need to validate inside element and place required attribute on each element which should be filled before submit.

<form action="process.php" method="POST" enctype="multipart/form-data" id="add_prod_form">
    Item Name: <input type="text" name="add_prod_name" id="add_prod_name" required/><br />
    Image 1: <input type="file" name="add_prod_image[]" id="add_prod_image" required/><br />
    Image 2: <input type="file" name="add_prod_image[]" required/><br />
    Image 3: <input type="file" name="add_prod_image[]" required/><br />
    Image 4: <input type="file" name="add_prod_image[]" required/><br />
    Image 5: <input type="file" name="add_prod_image[]" required/><br />
    Short description:<br />
    <textarea rows="7" cols="50" name="add_prod_description_short" id="add_prod_description_short"required/></textarea><br />
    Long description:<br />
    <textarea rows="7" cols="50" name="add_prod_description_long" id="add_prod_description_long"required/></textarea><br />
    Price: <input type="number" name="add_prod_price" id="add_prod_price"required/><br />
    <input type="hidden" name="action" value="add_product" required/>
    <input type="submit" name="submit" id="add_prod_submit">
</form>

This would be great if all browsers actively support it; perhaps in a few more years ;-) — Ja͢ck, May 08 '15 at 05:17
i have tested this on chrome, firefox, IE. most users are using these browsers only so validation works fine in all. — Ritesh Dhuri, May 08 '15 at 05:37
Sadly, your own setup isn't very representative of all Internet users; that said, it's definitely worth it to add those attributes now. — Ja͢ck, May 08 '15 at 05:40

Yangguang · Answer 5 · 2015-05-08T05:09:54.440

-1

It is because the:

<input type="submit" name="submit" id="add_prod_submit" disabled="disabled">

it's val() is null always,

Change it with:

<button type="submit" name="submit" id="add_prod_submit" disabled="disabled">submit</button>

jsfiddle

edited May 08 '15 at 05:09

answered May 08 '15 at 04:47

Yangguang

1,785
9
10

Is that not exactly what I have done? I don't see why having it on two lines would be better. Unless of course it has to be... Is that why you recommended it? – Matthew Goulart May 08 '15 at 04:49
I found the bug, it is the submit also use input tag, you can change it with button tag like the updated code above. – Yangguang May 08 '15 at 05:08

How to properly check if all form elements are filled with JavaScript

5 Answers5