How do I correctly perform form validation in JavaScript?

Question

I am having a hard time trying to do a correct form validation. I have Name, Email, and Phone Number fields. I implemented the validation check for all of them and when I click on the submit query, it returns email as false, but not anything else. It also will still submit the form. How do I fix this?

JSFiddle: http://jsfiddle.net/GVQpL/

JavaScript Code:

function validateForm(/*fullName, email, phoneNumber*/)
{
    //-------------------------NAME VALIDATION-----------------------------//
    var fullNameV = document.forms["queryForm"]["fullName"].value;
    if (fullNameV == null || fullNameV == "")
    {
        alert("Name must be filled out!");
        return false;
    }
    else if(fullNameV.indexOf(" ") <= fullNameV.length)
    {
        alert("Not a valid name");
        return false;
    }

    //-------------------------EMAIL VALIDATION-----------------------------//
    var emailV = document.forms["queryForm"]["email"].value;
    if (emailV == null || emailV == "")
    {
         alert("Email must be filled out!");
         return false;
    }
    var atpos = emailV.indexOf("@");
    var dotpos = emailV.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length)
    {
        alert("Not a valid e-mail address");
        return false;
    }

    //-------------------------PHONE # VALIDATION-----------------------------//
    var phoneNumberV = document.forms["queryForm"]["phoneNumber"].value;
    if (phoneNumberV == null || phoneNumberV == "")
    {
        alert("Phone Number must be filled out!");
        return false;
    }
    var error = "";
    var stripped = phoneNumberV.replace(/[\(\)\.\-\ ]/g, '');    

    if (phoneNumberV == "") 
    {
        error = alert("You didn't enter a phone number.\n");
        phoneNumberV.style.background = 'Yellow';
    } 
    else if (isNaN(parseInt(stripped))) 
    {
        error = alert("The phone number contains illegal characters.\n");
        phoneNumberV.style.background = 'Yellow';
    } 
    else if (!(stripped.length == 10)) 
    {
        error = alert("The phone number is the wrong length. Make sure you included an area code.\n");
        phoneNumberV.style.background = 'Yellow';
    }
    return error;
}

Answer 1

Update your fiddle's html for the function to be called onsubmit="return validateForm()" and removed the required="required" changed your function to work, you can see it here:

http://jsfiddle.net/GVQpL/3/

        function validateForm(/*fullName, email, phoneNumber*/)
        {
            //-------------------------NAME VALIDATION-----------------------------//
            var fullNameV = document.forms["queryForm"]["fullName"].value;
            if (fullNameV == null || fullNameV == "")
            {
                alert("Name must be filled out!");
                document.forms["queryForm"]["fullName"].focus();
                return false;
            }
            else if(fullNameV.indexOf(" ") >= fullNameV.length)
            {
                alert("Not a valid name");
                document.forms["queryForm"]["fullName"].focus();
                return false;
            }

            //-------------------------EMAIL VALIDATION-----------------------------//
            var emailV = document.forms["queryForm"]["email"].value;
            if (emailV == null || emailV == "")
            {
                alert("Email must be filled out!");
                document.forms["queryForm"]["email"].focus();
                return false;
            }

            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(emailV)){

                alert("Not a valid e-mail address");
                document.forms["queryForm"]["email"].focus();
                return false;
            }

            //-------------------------PHONE # VALIDATION-----------------------------//
            var phoneNumberV = document.forms["queryForm"]["phoneNumber"].value;
            if (phoneNumberV == null || phoneNumberV == "")
            {
                alert("Phone Number must be filled out!");
                document.forms["queryForm"]["phoneNumber"].focus();
                return false;
            }
            var error = "";
            var stripped = phoneNumberV.replace(/[\(\)\.\-\ ]/g, '');    

            if (phoneNumberV == "") 
            {
                alert("You didn't enter a phone number.\n");
                document.forms["queryForm"]["phoneNumber"].focus()
                document.forms["queryForm"]["phoneNumber"].style.background = 'Yellow';
                return false;
            } 
            else if (isNaN(parseInt(stripped))) 
            {
             alert("The phone number contains illegal characters.\n");
                document.forms["queryForm"]["phoneNumber"].focus();
                document.forms["queryForm"]["phoneNumber"].style.background = 'Yellow';
                return false;
            } 
            else if (!(stripped.length == 10)) 
            {
                alert("The phone number is the wrong length. Make sure you included an area code.\n");
                document.forms["queryForm"]["phoneNumber"].focus();
                document.forms["queryForm"]["phoneNumber"].style.background = 'Yellow';
                return false;
            }
            if(!confirm('Are you sure you want to submit your DSLR query?')){
                return false;   
            }
            return true;
        }