Question

I am new at javascript, and am trying to get it so that when a user doesn’t fill out all fields on my form, that they get an alert error.

Here is the first line of my form telling it to validate my function on submit…

<form accept-charset="UTF-8" action="xxxx" class="infusion-form" method="POST" name="myform" onsubmit="return validateForm();">

and here is my javascript function…

<script type="text/javascript">// <![CDATA[
function validateForm() {
    var a = document.forms["myform"]["inf_field_FirstName"].value;
    var b = document.forms["myform"]["inf_field_Email"].value;
    var c = document.forms["myform"]["inf_field_Phone1"].value;
    var d = document.forms["myform"]["inf_field_StreetAddress1"].value;
    var e = document.forms["myform"]["inf_field_City"].value;
    var f = document.forms["myform"]["inf_field_State"].value;
    var g = document.forms["myform"]["inf_field_PostalCode"].value;
    var h = document.forms["myform"]["inf_other_Username"].value;
    var i = document.forms["myform"]["inf_other_Password"].value;
    var j = document.forms["myform"]["inf_other_RetypePassword"].value;

    if (a == null || a == "" || a == "First Name Here") {
        alert("Please enter your First Name!");
        return false;
    }
    if (c == null || c == '' || c == "Enter Your Phone Here" || c.length < 9) {
        alert("Please insert your phone number!");
        return false;
    }
    if (d == null || d == '' || d == "Street Address") {
        alert("Please insert your street address ");
        return false;
    }
if (e == null || e == '' ||e == "City") {
        alert("Please insert your city");
        return false;
    }

    if (f == null || f == '' || f == "State") {
        alert("Please insert your state ");
        return false;
    }

if (g == null || g == '' ||g == "Postal Code") {
        alert("Please insert your postal code");
        return false;
    }
    if (h == null || h == '' || h == "Username") {
        alert("Please insert your username ");
        return false;
    }
if (i == null || i == '' ||i == "password") {
        alert("Please insert your password");
        return false;
    }
    if (j == null || j == '' || j == "password") {
        alert("Please re - type your password ! ");
        return false;
    }




    var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    if (document.myform.inf_field_Email.value.search(emailRegEx) == -1) {
        alert("Please enter a valid email address.");
        return false;
    }
}
// ]]>
</script>

I am not sure what I am doing wrong? thank you so much for any help. Also the page is at http://business.uglyopportunities.com/affiliate-signup/ if you want to inspect element (form is located at bottom of page)

thanks

Answer 1

You declare validateForm in javascript AFTER the form. Try moving it up to before the form. Or even better, in the head of your page.

Learn how to use a javascript debugger. You would have caught this right away (validateForm throws an error when called). http://www.youtube.com/watch?v=54IgWgoFToc