patrickmooney/realtime-form-validation-css-javascript.html

## realtime-form-validation-css-javascript.html
<!DOCTYPE html>
<html>
<head>

<style>
body{
 	margin: 0px auto;
    text-align: left;
    width: 600px;
}
input{
	width:100%;
	height: 50px;
	font-size: 24px;
	margin:40px;
	border-radius: 10px;
	border: 1px solid black;
	outline:none;
	padding-left: 20px;
}

input.dirty:invalid{
	border: 2px solid red;
	background-color: pink;
}

input.dirty:valid{
	background-color: lightgreen;
}

</style>


</head>
<body id=usrForm>

<form>
<input type=text required patterns="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$" placeholder="192.0.1.1">
<input type=email required name=email1 id=email1 placeholder="email address">
<input type=email required name=email2 id=email2 placeholder="confirm email address">
<input type="submit" value="Send">

</form>


<script type="text/javascript">
      var form;

      function initForm() {
        form = document.getElementById("usrForm")

form.addEventListener("submit", function(evt) {
          if (form.checkValidity() === false) {
            evt.preventDefault();
            alert("Form is invalid - submission prevented!");
            return false;
          } else {
            // To prevent data from being sent, we've prevented submission
            // here, but normally this code block would not exist.
            evt.preventDefault();
            alert("Form is valid - submission prevented to protect privacy.");
            return false;
          }
        });

}

	function initConfirmEmail() {
		var elem = document.getElementById("email2");


		var myLittleEvent = function(evt){
			return;
		}
		elem.addEventListener("blur", verifyEmail);

		function verifyEmail(input) {
	  		input = input.srcElement;
	  		var primaryEmail = document.getElementById('email1').value;
	  		if (input.value != primaryEmail) {
			    // the provided value doesn't match the primary email address
			    input.setCustomValidity('The two email addresses must match.');
			    console.log("E-mail addresses do not match", primaryEmail, input.value);
	  		} else {
			    // input is valid -- reset the error message
			    input.setCustomValidity('');
			  }
		}
	}

	      function initInputs() {

var inputs = document.getElementsByTagName("input");
        var inputs_len = inputs.length;

        /* Using the dirty class to prevent all inputs from validating until they
           are actually validated (onsubmit) or focus lost. If this wasn't here
           the brower would flag as invalid before anything was entered or as its being entered */
        var addDirtyClass = function(evt) {
          	evt.srcElement.classList.toggle("dirty", true);
        	//input.setCustomValidity('');

        };
        for (var i = 0; i < inputs_len; i++) {
          var input = inputs[i];
          input.addEventListener("blur", addDirtyClass);
          input.addEventListener("invalid", addDirtyClass);
          input.addEventListener("valid", addDirtyClass);
        }

}

initForm();
initInputs();
initConfirmEmail();
</script>

</body>


</html>

## realtime-form-validation-css.html
<!DOCTYPE html>
<!--
  Inspired by https://developers.google.com/web/fundamentals/input/form/provide-real-time-validation
  example https://google-developers.appspot.com/web/fundamentals/resources/samples/input/form/order
-->
<html>
<head>
<style>
body{
    margin: 0px auto;
    text-align: left;
    width: 600px;
}
input{
	width:100%;
	height: 50px;
	font-size: 24px;
	margin:40px;
	border-radius: 10px;
	border: 1px solid black;
	outline:none;
	padding-left: 20px;
}

input.dirty:invalid{
	border: 2px solid red;
	background-color: pink;
}

input.dirty:valid{
	background-color: lightgreen;
}
</style>
</head>
<body id=usrForm>

<form>
<!-- pattern validation for an IP Address -->
  <input type=text required pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$" placeholder="192.0.1.1">
  <input type="submit" value="Send">
</form>


<script type="text/javascript">
  var form;
  function initInputs() {
    var inputs = document.getElementsByTagName("input");
    var inputs_len = inputs.length;
    /* Using the dirty class to prevent all inputs from validating until they
        are actually validated (onsubmit) or focus lost. If this wasn't here
        the brower would flag as invalid before anything was entered or as its being entered */
    var addDirtyClass = function(evt) {
      evt.srcElement.classList.toggle("dirty", true);
    };

    for (var i = 0; i < inputs_len; i++) {
      var input = inputs[i];
        input.addEventListener("blur", addDirtyClass);
        input.addEventListener("invalid", addDirtyClass);
        input.addEventListener("valid", addDirtyClass);
    }
  }
  initInputs();
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>

	<style>
	body{
	margin: 0px auto;
	text-align: left;
	width: 600px;
	}
	input{
	width:100%;
	height: 50px;
	font-size: 24px;
	margin:40px;
	border-radius: 10px;
	border: 1px solid black;
	outline:none;
	padding-left: 20px;
	}

	input.dirty:invalid{
	border: 2px solid red;
	background-color: pink;
	}

	input.dirty:valid{
	background-color: lightgreen;
	}

	</style>


	</head>
	<body id=usrForm>

	<form>
	<input type=text required patterns="^(?:(?:25[0-5]\|2[0-4][0-9]\|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]\|2[0-4][0-9]\|[01]?[0-9][0-9]?)$" placeholder="192.0.1.1">
	<input type=email required name=email1 id=email1 placeholder="email address">
	<input type=email required name=email2 id=email2 placeholder="confirm email address">
	<input type="submit" value="Send">

	</form>


	<script type="text/javascript">
	var form;

	function initForm() {
	form = document.getElementById("usrForm")

	form.addEventListener("submit", function(evt) {
	if (form.checkValidity() === false) {
	evt.preventDefault();
	alert("Form is invalid - submission prevented!");
	return false;
	} else {
	// To prevent data from being sent, we've prevented submission
	// here, but normally this code block would not exist.
	evt.preventDefault();
	alert("Form is valid - submission prevented to protect privacy.");
	return false;
	}
	});

	}

	function initConfirmEmail() {
	var elem = document.getElementById("email2");


	var myLittleEvent = function(evt){
	return;
	}
	elem.addEventListener("blur", verifyEmail);

	function verifyEmail(input) {
	input = input.srcElement;
	var primaryEmail = document.getElementById('email1').value;
	if (input.value != primaryEmail) {
	// the provided value doesn't match the primary email address
	input.setCustomValidity('The two email addresses must match.');
	console.log("E-mail addresses do not match", primaryEmail, input.value);
	} else {
	// input is valid -- reset the error message
	input.setCustomValidity('');
	}
	}
	}

	function initInputs() {

	var inputs = document.getElementsByTagName("input");
	var inputs_len = inputs.length;

	/* Using the dirty class to prevent all inputs from validating until they
	are actually validated (onsubmit) or focus lost. If this wasn't here
	the brower would flag as invalid before anything was entered or as its being entered */
	var addDirtyClass = function(evt) {
	evt.srcElement.classList.toggle("dirty", true);
	//input.setCustomValidity('');

	};
	for (var i = 0; i < inputs_len; i++) {
	var input = inputs[i];
	input.addEventListener("blur", addDirtyClass);
	input.addEventListener("invalid", addDirtyClass);
	input.addEventListener("valid", addDirtyClass);
	}

	}

	initForm();
	initInputs();
	initConfirmEmail();
	</script>

	</body>


	</html>
	<!DOCTYPE html>
	<!--
	Inspired by https://developers.google.com/web/fundamentals/input/form/provide-real-time-validation
	example https://google-developers.appspot.com/web/fundamentals/resources/samples/input/form/order
	-->
	<html>
	<head>
	<style>
	body{
	margin: 0px auto;
	text-align: left;
	width: 600px;
	}
	input{
	width:100%;
	height: 50px;
	font-size: 24px;
	margin:40px;
	border-radius: 10px;
	border: 1px solid black;
	outline:none;
	padding-left: 20px;
	}

	input.dirty:invalid{
	border: 2px solid red;
	background-color: pink;
	}

	input.dirty:valid{
	background-color: lightgreen;
	}
	</style>
	</head>
	<body id=usrForm>

	<form>
	<!-- pattern validation for an IP Address -->
	<input type=text required pattern="^(?:(?:25[0-5]\|2[0-4][0-9]\|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]\|2[0-4][0-9]\|[01]?[0-9][0-9]?)$" placeholder="192.0.1.1">
	<input type="submit" value="Send">
	</form>


	<script type="text/javascript">
	var form;
	function initInputs() {
	var inputs = document.getElementsByTagName("input");
	var inputs_len = inputs.length;
	/* Using the dirty class to prevent all inputs from validating until they
	are actually validated (onsubmit) or focus lost. If this wasn't here
	the brower would flag as invalid before anything was entered or as its being entered */
	var addDirtyClass = function(evt) {
	evt.srcElement.classList.toggle("dirty", true);
	};

	for (var i = 0; i < inputs_len; i++) {
	var input = inputs[i];
	input.addEventListener("blur", addDirtyClass);
	input.addEventListener("invalid", addDirtyClass);
	input.addEventListener("valid", addDirtyClass);
	}
	}
	initInputs();
	</script>

	</body>
	</html>