CODEWITHSUNDEEP
javascripthtml
Tim C
Tim C

Reputation: 5714

JavaScript form validation code is not giving desired results

I have a subscription form on my website that I am trying to validate. When the user clicks the button signup the function validate() is called and the fields should get validated however im not getting it to work.

Obviously there are some errors in my code. I have tried to fix it with the little knowledge I have, but can't get it to work. I would greatly appreciate it if you could point me into the right directions as to what I am doing wrong.

Code follows:

function validate()
{
    var name = document.getElementById("name").value;
    var phone = document.getElementById("phone").value;
    var nat = document.getElementById("nat").value;
    var address = document.getElementById("address").value;
    var town = document.getElementById("town").value;
    var zip = document.getElementById("zip").value;
    var userName = document.getElementById("userName").value;
    var password = document.getElementById("password").value;
    var password2= document.getElentById("password2").value;

    if (name == "" )
    {
        window.alert("Please Enter your Full Name")
    }
    checkNr= isNaN(phone)

    if(checkNr == true)
    {
        window.alert("You can only enter numbers. Please try again")
    }

    if (nat == "")
    {
       window.alert("Please enter your nationality")
    }

    if (address == "")
    {
        window.alert("Please Enter your address")
    }

    if (password != password2)
    {
        window.alert("Your passwords did not match. Please re-enter")
    }
}

</script>

HTML:

<form name="subscribe">
    FULLNAME: </strong><input type="text" id="name"/><br />
    PHONE NR: <input type="text" id="phone"  onblur="validateForm()" /><br />
    NATIONALITY:<input type="text" id="nat" /><br />
    Address:<input type="text" id="address" /><br />
    Town:<input type="text" id="town" /><br />
    Zip Code: <input type="text" id="zip" /><br />
    Username: <input type="text" id="userName" /><br />

    Password:<input type="password" name="password" /><br />
    Retype:<input type="password" name="password2"  /><br />
    <input type="button" value="submit" onclick="validate()" />
</form>

Upvotes: 1

Views: 248

Answers (3)

V31
V31

Reputation: 7666

A couple of suggestions:

  1. In JavaScript comparisions are done using === (equal to) and !== (not equal to).

  2. If you have only the variable name in the if loop that will also suffice. Like:

    if (address)
{
    window.alert("Please enter your address")
}

Upvotes: 0

Tim C
Tim C

Reputation: 5714

I found my mistake. It looks like you can not use the document.get with a password input field. I took out the password and it worked. It would be great if I could get some input from someone more experience as to why.

Upvotes: 0

Jan Turoň
Jan Turoň

Reputation: 32912

I found these mistakes in your code:

  1. there is no validateForm() function specified in your phone input field
  2. if you want your form to send data, set the type submit, not button on your submit button

  3. if you want to stop the form submitting when something is not filled, hook the onsubmit event of the form:

    <form onsubmit="return validate()"> ... // note the return keyword

and the script

function validate() {
  ...
  if(somethingIsWrong) return false; // false stops submitting
  else return true; // do submit
}

also note the getElentById typo mentioned by @FranciscoAfonzo

Upvotes: 1

Related Questions