Check if inputs are empty using jQuery?

Question

I'm creating a simple form with validation, and want any empty input or textarea to have a class added, but I do not know how to check for empty inputs.

Currently, it adds to all inputs; I just want the empty inputs/textareas. Can anyone help?

HTML:

<form id="contactform">
    <input type="text" id="name" placeholder="name" autofocus >
    <input placeholder="email" >
    <textarea placeholder="message" ></textarea>
    <input type="submit">
    </input>
</form>

jQuery:

$(function () {
    $("#contactform").submit(function () {
        if($("input, textarea").val() === ""){
        $("input").addClass("error");   
        return false;
        }
        $("input").removeClass("error");
    });
});

Why do you think `.val()` would return `0` for empty inputs? [**Read the API documentation.**](http://api.jquery.com/val/) — Matt Ball, Mar 18 '13 at 20:52
Possible duplicate of [Check if inputs are empty using jQuery](http://stackoverflow.com/questions/1854556/check-if-inputs-are-empty-using-jquery) — Marcelo Zárate, Feb 05 '16 at 15:41

score 4 · Accepted Answer · answered Mar 18 '13 at 21:01

Try this:

 $("#contactform").submit(function (e) {
     e.preventDefault();
     $(":input").not("[type=submit]").removeClass('error').each(function () {
         if ($.trim($(this).val()).length == 0) $(this).addClass('error');
     });
 });

jFiddle example

(note the preventDefault is there so the form doesn't submit and you can see it work)

OJay · Answer 2 · 2013-03-18T21:02:52.757

0

.val() doesn't return a number, it returns a string. So change $("input, textarea").val() == 0 to $("input, textarea").val() === ""

EDIT

as per comments, and to be a bit more comprehensive in your testing for an empty field then

$("input, textarea").each(function(){
    var self = $(this),
        thisVal = self.val();
    if($.trim(thisVal) === "" || thisVal.length === 0)
    {
        self.addClass("error");
    }
});

edited Mar 18 '13 at 21:02

answered Mar 18 '13 at 20:52

OJay

4,763
3
26
47

I'd swap the equals with a `trim()` plus a `length` test. Seems to result in the fewest complaints from web users in my own experience. – Jason Sperske Mar 18 '13 at 20:56

user1048676 · Answer 3 · 2013-03-18T21:37:24.633

0

If you actually want to submit the form afterwards (adopting the accepted answer). Try this:

$("#submit_form").click(function () {
$submit = "yes";
$(":input").not("[type=button]").removeClass('error').each(function () {
    if ($.trim($(this).val()).length == 0) {
        $(this).addClass('error');
        $submit = "no";
    }
});
if ($submit == "yes") {
    $("#contactform").submit();
}
});

This will go through each one and verify it has content and if it doesn't it wont allow you to submit the form. Otherwise the form will submit. I also changed your submit button to be a button instead. It went from:

 <input type="submit">

To submit with a button:

 <input type="button" id="submit_form" value="Submit" />

edited Mar 18 '13 at 21:37

answered Mar 18 '13 at 20:54

user1048676

9,756
26
83
120

That's exactly what I want! but it does it individually, how do I make it do them all at the same time? – Jenni Mar 18 '13 at 20:59
Why would you want to do that? How you have it set up you'd want to apply the error class to the input that is missing. – user1048676 Mar 18 '13 at 21:04
I know you accepted an answer but you could also flag a variable when you return false and then add a
and apply a message in the
saying that all the fields aren't filled out and then you wouldn't have to highlight the specific input fields if that is really what you were looking for.
– user1048676 Mar 18 '13 at 21:10
I appreciate your interest, but I found my answer. If you still want to help, you can explain why it wont submit when the inputs are filled? http://jsfiddle.net/9F9XH/ – Jenni Mar 18 '13 at 21:15

score 0 · Answer 4 · edited Sep 27 '21 at 16:51

In order to avoid custom validation for mandatory fields, use https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js. Add this library in blade (at the beginning of the javascript section). Using this library, if the required fields are not filled, a pop up will appear on submitting form. Validation will work for all "required" datatypes. For reference: https://jqueryvalidation.org/. This method worked for me.

Check if inputs are empty using jQuery?

4 Answers4