title: Correct method to validate a form using javascript (simple)
body: <p>I have a form that has five fields; <code>first name</code>, <code>last name</code>, <code>username</code>, <code>password</code> and <code>passwordConfirmation</code>.</p>
  
  <p>I'd firstly like to say that I don't want the most complicated method, this is for a very simple website that will never go live, it is purely for demonstration purposes and I am not to worry about error catching in the sense of harmful user input.</p>
  
  <p>So far I have this:</p>
  
  <pre><code>function validateRegistrationForm(firstName, lastName, username, password, passwordConfirmation) {
  alert("validate form function has been called");
  //alert("function has been called");
  
  //---
  
  
  var firstName = firstName;
  //alert(firstName);
  var lastName = lastName;
  //alert(lastName);
  var username = username;
  //alert(username);
  var password = password;
  //alert(password);
  var passwordConfirmation = passwordConfirmation;
  //alert(passwordConfirmation);
  
  //---
  
  //**The code that I have sectioned off here, I am unsure whether I need it or not, could someone please explain to me why I would do this, and not just reference the parameters in the function directly?**
  
  // Check here if all the fields in the registeration form have been filled.
  
  if ( firstname == null || firstname == "" ) {
      //firstname hasn't been filled out
  }
  
  if ( lastName == null || lastName == "" ) {
      //lastname hasn't been filled out
  }
  
  if ( username == null || username == "" ) {
      //username hasn't been filled out
  }
  
  if ( password == null || password == "" ) {
      //password hasn't been filled out
  }
  
  if ( passwordConfirmation == null || passwordConfirmation == "" ) {
      //passwordconfirmation hasn't been filled out
  }
  }
  </code></pre>
  
  <p>I would like to have a way to check if each of the fields have been filled out (which I have here I think) and if not, to produce a notification such as a red border around the input element in question and/or a message with instructions on how to resolve the issue. I know this can be done with css but I am not sure of the most efficient way to do it.</p>
  
  <p>Currently I have created these two functions:</p>
  
  <pre><code>function generateError(messageText, elementIdentifier) {
  alert("error generator called");    
  //var element = document.getElementById(elementID);
  //var error = document.createTextNode(message);
  //element.innerHTML = message;
  alert("Element: " + elementIdentifier + ", Reason: " + messageText);
  }
  
  function validatePassword(password, passwordConfirmation) {
  alert("password check called");
  if (password == passwordConfirmation) {
      if (password.length &lt; 8) {
          //password too short
          //alert("password\'s match but they are too short");
  
          return false;
      } else {
          //passwords match and the right length
          //alert("password\'s match and they are 8 characters or longer");
          return true;
      }
  } else {
      //the two do not match
      //alert("they don\'t match")
      generateError("Passwords don\'t match", "password");
      return false;
  }
  }
  </code></pre>
  
  <p>The <code>validatePassword()</code> function takes the password and the password confirmation as two parameters, I think this works already, what I want is for the errors generated to be passed to the <code>generateError()</code> function which stores them all in an array and then loops through them one by one displaying to the user what is wrong.</p>