shidel-dev/form-validator.js

## form-validator.js
$(function() {
    $("form[name='sign_up']").submit(function(event) {
        event.preventDefault();
        $("#errors").empty()
        var email = validateEmail($("input[name='email']"));
        var password = validatePassword($("input[name='password']"));
        if (email == true) {
            if (password == true) {
                $("#errors").append("<ui>Success</ui>");
            } else {
                for (var i = 0; i < password.length; i++) {
                    $("#errors").append(password[i])
                }
            }
        } else {
            $("#errors").append(email)
        }
    })
});


function validateEmail(elem) {

    if ((/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i).test(elem.val())) {
        return true
    } else {
        return "<ui>Must be a valid Email</ui>"
    }

}

function validatePassword(elem) {
    var messages = [];
    var str = elem.val();
    if (/.{8,}/.test(str) == false) {
        messages.push("<ui>password must be at least 8 in length</ui><br>");
    };
    if (/[A-Z]+/.test(str) == false) {
        messages.push("<ui>password must be at least one upcase letter</ui><br>");
    };
    if (/[0-9]+/.test(str) == false) {
        messages.push("<ui>password must be at least one number</ui><br>");
    };

    if (messages == []) {
        return true
    } else {
        return messages
    }


}

//\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b

## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <title>Form Validation</title>
  </head>
  <body>
    <form name="sign_up" action="#" method="post">
      <label for="email">Email</label>
      <input type="text" name="email" />
      <label for="password">Password</label>
      <input type="password" name="password" />

      <button type="submit">Sign Up</button>

      <ul id="errors"></ul>
    </form><body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="form-validator.js"></script>
  </body>
</html>

## main.css
ul#errors {
  color: red;
}
	$(function() {
	$("form[name='sign_up']").submit(function(event) {
	event.preventDefault();
	$("#errors").empty()
	var email = validateEmail($("input[name='email']"));
	var password = validatePassword($("input[name='password']"));
	if (email == true) {
	if (password == true) {
	$("#errors").append("<ui>Success</ui>");
	} else {
	for (var i = 0; i < password.length; i++) {
	$("#errors").append(password[i])
	}
	}
	} else {
	$("#errors").append(email)
	}
	})
	});


	function validateEmail(elem) {

	if ((/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i).test(elem.val())) {
	return true
	} else {
	return "<ui>Must be a valid Email</ui>"
	}

	}

	function validatePassword(elem) {
	var messages = [];
	var str = elem.val();
	if (/.{8,}/.test(str) == false) {
	messages.push("<ui>password must be at least 8 in length</ui><br>");
	};
	if (/[A-Z]+/.test(str) == false) {
	messages.push("<ui>password must be at least one upcase letter</ui><br>");
	};
	if (/[0-9]+/.test(str) == false) {
	messages.push("<ui>password must be at least one number</ui><br>");
	};

	if (messages == []) {
	return true
	} else {
	return messages
	}


	}

	//\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="main.css">
	<title>Form Validation</title>
	</head>
	<body>
	<form name="sign_up" action="#" method="post">
	<label for="email">Email</label>
	<input type="text" name="email" />
	<label for="password">Password</label>
	<input type="password" name="password" />

	<button type="submit">Sign Up</button>

	<ul id="errors"></ul>
	</form><body>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="form-validator.js"></script>
	</body>
	</html>