How do I use javascript to prevent form submission because of empty fields?

Question

How do I make a script in javascript to output an error and prevent form submission with empty fields in the form? Say the form name is \"form\" and the input name is \"name\".

Answer 1

Attach an event handler to the submit event, check if a value is set (DEMO).

var form = document.getElementById('test');

if (!form.addEventListener) {
    form.attachEvent("onsubmit", checkForm); //IE8 and below
}
else {
    form.addEventListener("submit", checkForm, false);
}

function checkForm(e) { 
    if(form.elements['name'].value == "") {
        e.preventDefault();
        alert("Invalid name!");   
    }
}

Answer 2

HTML Code :-

<form name='form'>
<input type="button" onclick="runMyFunction()" value="Submit form">
</form>

Javascript Code :-

  function runMyFunction()
    {
        if (document.getElementsByName("name")[0].value == "")
        {
            alert("Please enter value");
        }
        else
        {
            var form= document.getElementsByName("form")[0];
            form.submit();        
        }
    }

Answer 3

This is untested code but it demonstrates my method.

It will check any text field in 'form' for empty values, and cancel the submit action if there are any.

Of course, you will still have to check for empty fields in PHP for security reasons, but this should reduce the overhead of querying your server with empty fields.

window.onload = function (event) {
    var form = document.getElementsByName('form')[0];
    form.addEventListener('submit', function (event) {
        var inputs = form.getElementsByTagName('input'), input, i;
        for (i = 0; i < inputs.length; i += 1) {
            input = inputs[i];
            if (input.type === 'text' && input.value.trim() === '') {
                event.preventDefault();
                alert('You have empty fields remaining.');
                return false;
            }
        }
    }, false);
};

Answer 4

Claudio's answer is great. Here's a plain js option for you. Just says to do nothing if field is empty - and to submit if not.

If you need to validate more than one, just add an && operator in the if statement and add the same syntax for OtherFieldName

function checkForm(form1)
{
    if (form1.elements['FieldName'].value == "")
    {
        alert("You didn't fill out FieldName - please do so before submitting");
        return false;
    }
    else
    {
        form1.submit();
        return false;
    }
}