Basic Form Validation with JavaScript/HTML

Question

I'm writing a form validation script for my Contact Us form I made. The script is pretty straight forward, I am wondering why it isn't working correctly.

No matter what fields I have content in, it always says that field is empty after running the script.

Here is my code:

    var firstName = document.getElementById("fname");
var lastName = document.getElementById("lname");
var email = document.getElementById("email");
var message = document.getElementById("msg");
var errors = "";

function formValidation() {
    if (firstName==="" || firstName=== null)
    {
        errors += "-The First Name field is blank! \n";
    }   
    if (lastName==="" || lastName=== null)
    {
        errors += "-The Last Name field is blank! \n";

    }   
    if (email==="" || email=== null)
    {
        errors += "-The E-mail Address field is blank! \n";

    }
    if (message==="" || message=== null)
    {
        errors += "-The Message field is blank! \n";

    }

    if (errors !== "") {
        alert("Whoops! \n \n" + errors);    
    }
    if (errors === "") {
        alert("Message Sent!");
    }

}

Additionally, here is the jsfiddle I made: http://jsfiddle.net/3DxZj/1/

Thank you.

Quentin · Accepted Answer · 2014-03-23 19:29:56Z

2

First, you are trying to get the elements by their ids before they exist in the DOM (the script is above the form).

Second, if you corrected that then you would be comparing the HTMLInputElements themselves to an empty string, instead of their .value properties.

Third, you never reset errors so if anybody did get an error and them fixed it, they would still get the error alert when they tried again.

Add .value to the elements you are trying to get and move the following code so it is inside the function.

var firstName = document.getElementById("fname").value;
var lastName = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var message = document.getElementById("msg").value;
var errors = "";

You are also only checking for errors when the form is submitted using the submit button. You should do this when the form is submitted instead.

Move the onclick attribute contents to an onsubmit attribute on the form element. Better yet, bind your event listener with JS.

You aren't preventing the normal action of the form when there are errors. Presumably you want it to stop the data from submitting. Either:

Use addEventListener (see above), accept an argument for your function and call .preventDefault() on that argument's value when there are errors or
Add return to the front of your onsubmit attribute value and return false from the function when there are errors.

Also note that

Your label elements are useless; they need for attributes.
You shouldn't use tables to layout (most) forms.
The values will always be strings so there is no point in comparing to null.

edited Mar 23, 2014 at 19:29

answered Mar 23, 2014 at 19:24

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3271960 Over a year ago

Ah what a silly mistake. Any reason, it's still not working? My error is "undefined". jsfiddle.net/3DxZj/2

Quentin Over a year ago

@user3271960 — You haven't followed the bold instructions just above the code sample in this answer.

Community · Accepted Answer · 2017-05-23 12:20:52Z

You are querying the dom elements but not their values. The correct way would be

var firstName = document.getElementById("fname");
var lastName = document.getElementById("lname");
var email = document.getElementById("email");
var message = document.getElementById("msg");
var errors = "";

function formValidation() {
    if (firstName.value==="" || firstName.value=== null)
    {
        errors += "-The First Name field is blank! \n";
    }   
    if (lastName.value==="" || lastName.value=== null)
    {
        errors += "-The Last Name field is blank! \n";

    }   
    if (email.value==="" || email.value=== null)
    {
        errors += "-The E-mail Address field is blank! \n";

    }
    if (message.value==="" || message.value=== null)
    {
        errors += "-The Message field is blank! \n";

    }

    if (errors !== "") {
        alert("Whoops! \n \n" + errors);    
    }
    if (errors === "") {
        alert("Message Sent!");
    }

}

EDIT: Stupid me, didn't check the jsfiddle so I solved only one of your problems while making a mistake in my solution (corrected now), so stick to Quentins answer

Bangkokian · Accepted Answer · 2014-03-23 19:46:26Z

The issue is that you are not returning the .value of the form fields.

eg: var firstName = document.getElementById("fname").value;

Also, you should declare your vars inside the function.

Try this:

function formValidation() {
var firstName = document.getElementById("fname").value;
var lastName = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var message = document.getElementById("msg").value;
var errors = "";
if (firstName==="" || firstName=== null)
{
    errors += "-The First Name field is blank! \n";
}   
if (lastName==="" || lastName=== null)
{
    errors += "-The Last Name field is blank! \n";

}   
if (email==="" || email=== null)
{
    errors += "-The E-mail Address field is blank! \n";

}
if (message==="" || message=== null)
{
    errors += "-The Message field is blank! \n";

}

if (errors !== "") {
    alert("Whoops! \n \n" + errors);    
}
if (errors === "") {
    alert("Message Sent!");
}

}

Collectives™ on Stack Overflow

Basic Form Validation with JavaScript/HTML

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related