How do I check if the whole form is empty and alert it? The form should be able to send even if there's a few empty inputs.

Edit: Maybe I should've said that it's suppose to be JavaScript or jQuery.

And a better description: I've got a form with one part that contains 10 input fields, you only have to fill out one. The other part you only have to fill out name and phone or email but it's 4 fields you could fill with info. And at last a checkbox making sure the user knows he or she didn't fill out the whole form.

I know how to check all fields and alert if one is empty. But what I don't know is how to check if the whole form is empty and alert it.

How do I check if the whole form is empty and alert it? The form should be able to send even if there's a few empty inputs.

Edit: Maybe I should've said that it's suppose to be JavaScript or jQuery.

And a better description: I've got a form with one part that contains 10 input fields, you only have to fill out one. The other part you only have to fill out name and phone or email but it's 4 fields you could fill with info. And at last a checkbox making sure the user knows he or she didn't fill out the whole form.

I know how to check all fields and alert if one is empty. But what I don't know is how to check if the whole form is empty and alert it.

• javascript
• forms

Share Improve this question Follow edited Feb 29, 2012 at 17:32 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Feb 29, 2012 at 8:45 BellisiaBellisia 3122 silver badges77 bronze badges 3

• hmmm without any hint of what tech you using? – almog.ori Commented Feb 29, 2012 at 8:50
• 1 if you dont mind jquery heres a link to a validation plugin pabcas./feeling/checking-blank-form-inputs-with-jquery – almog.ori Commented Feb 29, 2012 at 8:57
• I don't mind jQuery at all, but cant use the plugin :( – Bellisia Commented Feb 29, 2012 at 9:01

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Here is quick and dirty way using pure JavaScript:

function checkForm​(oForm) {
    for (var i = 0; i < oForm.elements.length; i++) {
        if (GetElementValue(oForm.elements[i]).length > 0)
            return true;
    }
    alert("all empty");
    return false;
}

function GetElementValue(element) {
    if ((element.type === "checkbox" || element.type === "radio") && element.checked === false)
        return "";
    return element.value;
}

​Live test case.

create a validate method like this in JS (extend the Switch for other form Elements like radio or checkbox inputs):

function validateForm(domForm) {
    var elements = domForm.elements;
    var hasData = false;

    var isAEmptyString = function(string) {

        if(string) {
            return string.length() == 0;
        }

        return true;
    };


    for(var i = 0; i < elements.length; i++) {
        var element = elements[i];
        switch(element.tagName.toLowerCase()) {
            case 'textarea':
                if(!isAEmptyString(element.innerHTML)) {
                    return true;
                }
                break;
            case 'input':
                if(!isAEmptyString(element.value)) {
                    return true;
                }
                break;
            case 'select':
                if(element.selectedIndex >= 0) {
                    return true;
                }
                break;
        }
    }
    return false;
};

you can call it in your form onSubmit handler

<form onsubmit="return validateForm(this);">
<textarea name="a"></textarea>
<input type="text" name="b"></input>
<select name="c">
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
</select>
<input type="submit" />
</form>

I know how to check all fields and alert if one is empty. But what I don't know is how to check if the whole form is empty and alert it.

If that is the case just put a boolean check in your code

var haveAnyErrorsTriggered = false;
// loop through fields and if any are empty change the haveAnyErrorsTriggered to true
// then
if(haveAnyErrorsTriggered){alert("One or more fields are empty.");}

if you want to check if the whole form is empty, just do the opposite

var isAtLeastOneFieldFull = false;
// loop through fields and if any are not empty change the isAtLeastOneFieldFull to true
// then
if(!isAtLeastOneFieldFull){alert("all the fields are empty");}

You are talking about Javascript form validation. Create a Javascript function (called say validateForm) that validates the fields in your form, and pops up an alert if it detects an error. It should return true if the form is to be submitted, and false if there is an error. Then in the your HTML form tag, add the clause onsubmit="return validateForm()", where validateForm is the name of your function.

Maybe the form fields listener example I once cooked in this jsfiddle can help you further? Note that client side validation will never be enough. Anyone can tamper with the javascript in your page, so you allways have to validate a form server side too.