Form Validations in Javascript

Question

I can't quite seem to figure out why my code won't give me an error or success message back to me when I click the submit button. I am just trying to validate strings in an html form to make sure they are not null, not too big, etc.

Developer's tools and the Online Lint have given me no errors. Hopefully you guys can point out any wonky code I have written.

Javscript:

function submit()
{
  var firstName = document.getElementById("fn");
  var lastName = document.getElementById("ln");
  var email = document.getElementById("email");
  var emailR = document.getElementById("emailR");
  var userName = document.getElementById("un");
  var password = document.getElementById("pass");
  var passwordR = document.getElementById("passR");
  var error = "";
  var letters = /^[a-zA-Z]+$/;
  var postal = document.getElementById("pc");
  var code = /^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$/;

  if (firstName === null || firstName.length > 15 || !firstName.value.match(letters))
  {
    error += "Please enter a valid first name.";
  }
  if (lastName === null || lastName.length > 15 || !lastName.value.match(letters))
  {
    error += " Please enter a valid last name";
  }

  var ei = email.value.lastIndexOf('@');
  var dot = email.value.lastIndexOf('.');
  if (email === null || email.length < 7 || ei == -1 || dot == -1 || dot < ei + 2)
  {
    error += " Please enter a valid email address";
  }
  if (emailR != email)
  {
    error += " Your email addresses did not match";
  }
  if (postal === null || !postal.length == 7 || !postal.value.match(code))
  {
    error += "Postal code must follow Canadian standard. E.g. \"N3H 1M1\" ";
  }
  if (userName === null || userName.length > 15)
  {
    error += " Please enter a valid username (must be less than 15 characters)";
  }
  if (password === null || password.length > 15)
  {
    error += "please enter a valid password (must be less than 15 characters)";
  }
  if (passwordR != password)
  {
    error += "your passwords do not match";
  }
  if (error === "")
  {
    document.getElementById("test").innerHTML = "Thank you for signing up!";
  }
  else if (error !== "")
  {
    document.getElementById("test").innerHTML = error;
  }
}

Thanks, Javanoob

Is the function running? Is the page changing before you can see the messages? — Mike Cluck
– Mike Cluck, Commented Feb 9, 2016 at 18:03
Mind posting your markup as well? Also just making sure you are calling this function somewhere in your code correct? — aug
– aug, Commented Feb 9, 2016 at 18:05
I will post my HTML, the page doesnt change, just the url does. — D_Wagner
– D_Wagner, Commented Feb 9, 2016 at 18:07
@javanoob What do you mean "the page doesn't change, just the url does"? Generally speaking, if the URL has changed, you've been redirected to another page unless the only changes that take place are preceded by a #. — Mike Cluck
– Mike Cluck, Commented Feb 9, 2016 at 18:09
Okay well nothing changes on the page it doesn't even reload the url jjust changes to this file /index.html?firstname=&lastname=&email=&email=&gender=male&pc=&use=personal&un=&pass=&passR= — D_Wagner
– D_Wagner, Commented Feb 9, 2016 at 18:11

Philipp · Accepted Answer · 2016-02-09 18:09:07Z

3

document.getElementById gives you the complete HTMLElement object. To get the value of it, use it's .value property. Example:

var email = document.getElementById("email").value;

(assuming the HTML element with id = "email" is a text input)

answered Feb 9, 2016 at 18:09

Philipp

70.1k10 gold badges121 silver badges159 bronze badges

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

1 Comment

Philipp Over a year ago

@javanoob Then you might want to edit your question and add the HTML this code operates on.

Collectives™ on Stack Overflow

Form Validations in Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related