zzeni/form_validation.html

## form_validation.html
<!DOCTYPE html>
<html>

<head>
  <title>Web Forms Validation Example</title>

  <style>
    .error {
      border: 1px red solid;
    }

    .error-span {
      color: coral;
    }
  </style>
</head>

<body>
  <h3>Form validation example</h3>

  <form novalidate>
    <p>
      <label for="name">Your name:</label>
      <input type="text" name="name" placeholder="Your Name Here">
    </p>
    <p>
      <label for="email">email:</label>
      <input type="email" name="email" placeholder="user@example.com">
    </p>
    <p>
      <label for="message">Your message:</label>
    </p>
    <p>
      <textarea name="message" rows="5" placeholder="enter your message here"></textarea>
    </p>
    <p>
      <input type="reset" value="reset">
      <input type="submit" name="submit" value="submit">
    </p>
  </form>

  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script>
    $('form').submit(function (event) {
      event.preventDefault();

      var form = event.target;

      try {
        fieldValidate(form, 'name');
        fieldValidate(form, 'email');
        fieldValidate(form, 'message');

        alert('all is fine!');
      }
      catch (error) {
        var field = error.target;
        field.addClass('error');
        field.focus();

        field.parent().append('<span class="error-span">' + error.message + '</span>');
      }
    });


    function fieldValidate(form, fieldName) {
      var field = $(form).find('[name=' + fieldName + ']');
      var fieldValue = field.val();

      field.removeClass('error');
      field.parent().find('span').remove();

      if (fieldValue === "") {
        var error = new Error(fieldName + " is mendatory");
        error.target = field;
        throw error;
      }
      if (fieldName === "email" && emailCheck(fieldValue) === false) {
        var error = new Error("email is invalid");
        error.target = field;
        throw error;
      }
    }

    function emailCheck(email) {
      var match = email.match(/^\w+@\w+\.\w+$/)
      return match != null;
    }

    function usernameCheck(username) {
      var match = username.match(/^\w+$/)
      return match != null;
    }
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Web Forms Validation Example</title>

	<style>
	.error {
	border: 1px red solid;
	}

	.error-span {
	color: coral;
	}
	</style>
	</head>

	<body>
	<h3>Form validation example</h3>

	<form novalidate>
	<p>
	<label for="name">Your name:</label>
	<input type="text" name="name" placeholder="Your Name Here">
	</p>
	<p>
	<label for="email">email:</label>
	<input type="email" name="email" placeholder="user@example.com">
	</p>
	<p>
	<label for="message">Your message:</label>
	</p>
	<p>
	<textarea name="message" rows="5" placeholder="enter your message here"></textarea>
	</p>
	<p>
	<input type="reset" value="reset">
	<input type="submit" name="submit" value="submit">
	</p>
	</form>

	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script>
	$('form').submit(function (event) {
	event.preventDefault();

	var form = event.target;

	try {
	fieldValidate(form, 'name');
	fieldValidate(form, 'email');
	fieldValidate(form, 'message');

	alert('all is fine!');
	}
	catch (error) {
	var field = error.target;
	field.addClass('error');
	field.focus();

	field.parent().append('<span class="error-span">' + error.message + '</span>');
	}
	});


	function fieldValidate(form, fieldName) {
	var field = $(form).find('[name=' + fieldName + ']');
	var fieldValue = field.val();

	field.removeClass('error');
	field.parent().find('span').remove();

	if (fieldValue === "") {
	var error = new Error(fieldName + " is mendatory");
	error.target = field;
	throw error;
	}
	if (fieldName === "email" && emailCheck(fieldValue) === false) {
	var error = new Error("email is invalid");
	error.target = field;
	throw error;
	}
	}

	function emailCheck(email) {
	var match = email.match(/^\w+@\w+\.\w+$/)
	return match != null;
	}

	function usernameCheck(username) {
	var match = username.match(/^\w+$/)
	return match != null;
	}
	</script>
	</body>

	</html>