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

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”. I have been having some trouble with PHP not always handling the empty fields correctly, so I would like this as a backup. Any help is appreciated, thanks.

Solution #1:

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();        
        }
    }
Respondent: Shankar Kamble

Solution #2:

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;
    }
}
Respondent: itamar

Solution #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);
};
Respondent: Joe Simmons

Solution #4:

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!");   
    }
}
Respondent: Marcel Gwerder

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.