Syntax highlighted source code example

validation.js

/***************************/
//@Author: Adrian "yEnS" Mato Gondelle & Ivan Guardado Castro
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/

jQuery(document).ready(function() {
  //global vars
  var form = $("#customForm");
  var name = $("#name");
  var nameInfo = $("#nameInfo");
  var email = $("#email");
  var emailInfo = $("#emailInfo");
  var password = $("#password");
  var passwordInfo = $("#passwordInfo");
  var password2 = $("#password2");
  var password2Info = $("#password2Info");
  var message = $("#message");

  //On blur
  name.blur(validateName);
  email.blur(validateEmail);
  password.blur(validatepassword);
  password2.blur(validatepassword2);
  //On key press
  name.keyup(validateName);
  password.keyup(validatepassword);
  password2.keyup(validatepassword2);
  message.keyup(validateMessage);
  //On Submitting
  form.submit(function() {
    if(validateName() & validateEmail() & validatepassword() & validatepassword2() & validateMessage())
      return true
    else
      return false;
  });

  //validation functions
  function validateEmail() {
    //testing regular expression
    var a = $("#email").val();
    var filter = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z]{2,6})$/;
    //if it's valid email
    if(filter.test(a)) {
      email.removeClass("error");
      emailInfo.text("Valid E-mail please, you will need it to log in!");
      emailInfo.removeClass("error");
      return true;
    }
    //if it's NOT valid
    else {
      email.addClass("error");
      emailInfo.text("Stop cowboy! Type a valid e-mail please :P");
      emailInfo.addClass("error");
      return false;
    }
  }

  function validateName() {
    //if it's NOT valid
    if(name.val().length < 4) {
      name.addClass("error");
      nameInfo.text("We want names with more than 3 letters!");
      nameInfo.addClass("error");
      return false;
    }
    //if it's valid
    else {
      name.removeClass("error");
      nameInfo.text("What's your name?");
      nameInfo.removeClass("error");
      return true;
    }
  }

  function validatepassword() {
    var a = $("#password1");
    var b = $("#password2");

    //it's NOT valid
    if(password.val().length < 5) {
      password.addClass("error");
      passwordInfo.text("Ey! Remember: At least 5 characters: letters, numbers and '_'");
      passwordInfo.addClass("error");
      return false;
    }
    //it's valid
    else {
      password.removeClass("error");
      passwordInfo.text("At least 5 characters: letters, numbers and '_'");
      passwordInfo.removeClass("error");
      validatepassword2();
      return true;
    }
  }

  function validatepassword2() {
    var a = $("#password1");
    var b = $("#password2");
    //are NOT valid
    if(password.val() != password2.val()) {
      password2.addClass("error");
      password2Info.text("Passwords doesn't match!");
      password2Info.addClass("error");
      return false;
    }
    //are valid
    else {
      password2.removeClass("error");
      password2Info.text("Confirm password");
      password2Info.removeClass("error");
      return true;
    }
  }

  function validateMessage() {
    //it's NOT valid
    if(message.val().length < 10) {
      message.addClass("error");
      return false;
    }
    //it's valid
    else {
      message.removeClass("error");
      return true;
    }
  }

});