How to properly check if all form elements are filled with JavaScript
Solution 1
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.
Solution 2
When you are searching for the for input
s 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(){ ...
Solution 3
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!!!
Matthew Goulart
Updated on June 08, 2022Comments
-
Matthew Goulart almost 2 years
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
-
Matthew Goulart about 9 yearsIs 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?
-
Quan To about 9 yearsThen his problem is not what he was saying. Nice
-
Sougata Bose about 9 years@btquanto You are right. The problem is something else.
-
azium about 9 yearsThis 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.
-
Ja͢ck about 9 years@azium Yeah, that could be an improvement on OP's code :)
-
azium about 9 years@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
-
Matthew Goulart about 9 yearsI like the idea azium. I'm going to clean it up. Thanks to both of you!
-
Zee about 9 years@Jack. Will this work if I upload image at the last ? Does a
<input type="file">
has akeyup
event? -
Ja͢ck about 9 years@Sourabh- You would probably need a more generic onchange handler for that.
-
azium about 9 yearsGood 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 -
Zee about 9 years@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).
-
Yangguang about 9 yearsI found the bug, it is the submit also use input tag, you can change it with button tag like the updated code above.
-
Ja͢ck about 9 years@Sourabh- Fixed that in the answer; it now checks for both events :)
-
Ja͢ck about 9 yearsThis would be great if all browsers actively support it; perhaps in a few more years ;-)
-
Ritesh Dhuri about 9 yearsi have tested this on chrome, firefox, IE. most users are using these browsers only so validation works fine in all.
-
Ja͢ck about 9 yearsSadly, your own setup isn't very representative of all Internet users; that said, it's definitely worth it to add those attributes now.