CODEWITHSUNDEEP
javascriptforms
Bellisia
Bellisia

Reputation: 31

Alert if form is empty

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.

Upvotes: 2

Views: 5250

Answers (5)

kamui
kamui

Reputation: 3419

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");}

Upvotes: 1

silly
silly

Reputation: 7887

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>

Upvotes: 1

Shadow Wizard
Shadow Wizard

Reputation: 66389

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.

Upvotes: 2

KooiInc
KooiInc

Reputation: 122906

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.

Upvotes: 0

Philip Sheard
Philip Sheard

Reputation: 5825

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.

Upvotes: 0

Related Questions