boyofgreen · April 4, 2012 02:28
diff --git a/const validation.html b/const validation.html
 <form name="myForm">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" oninput=  “updateMessage(this)”/>

  Enter Your Email: <input type="email" name="myEmail" formnovalidate />
  <input type="submit" />
 </form>
diff --git a/const validation.js b/const validation.js
 myForm.quantity. setCustomValidity('looks like your numbers are off a bit, try using a number between one and five')

 function updateMessage(input){

 if(input.value ==""){}
 input.setCustomValidity('');

 }
diff --git a/form max.html b/form max.html
 <!DOCTYPE html>
 <html>
 <body>

 <form name="myForm">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" value="11" />
  <input type="submit" />
 </form>

 </body>
 </html>
diff --git a/form max.js b/form max.js
 if(document.myForm.quantity.checkValidity() === false){

 alert('fail');
 }
diff --git a/form max2.js b/form max2.js
 if(document.myForm.checkValidity() === false){  //myForm is the name of the form element

 alert('fail');
 }
diff --git a/form val css hint.css b/form val css hint.css
 input {display: block;
 border: 1px solid #ccc;
 }

 :invalid{ 
 border-color: #DB729C;
  -webkit-box-shadow: 0 0 5px rgba(27, 0, 97, .5);
 }

 :required{ 
 border-color: #1BE032;
  -webkit-box-shadow: 0 0 5px rgba(57, 237, 78, .5);
 }
diff --git a/form val css hint.html b/form val css hint.html
 <form name="myForm" >
 Enter Your Name: <input type="text" name="myName" placeholder="Enter Your Name" oninput="updateMessage(this)" required>
 Enter Your Phone Number: <input type="tel" name="myPhone" pattern="\d\d\d-\d\d\d-\d\d\d\d" />
 Enter Your Email: <input type="email" name="myEmail" />
 <input type="submit" />

 </form>
diff --git a/form val css hint.js b/form val css hint.js
 document.myForm.myName.setCustomValidity("To join our list, we at least need to know your name, please enter it here")

 function updateMessage(input){

 if(input.value ==""){}
 input.setCustomValidity('');

 }
	<form name="myForm">
	Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" oninput= “updateMessage(this)”/>

	Enter Your Email: <input type="email" name="myEmail" formnovalidate />
	<input type="submit" />
	</form>
	myForm.quantity. setCustomValidity('looks like your numbers are off a bit, try using a number between one and five')

	function updateMessage(input){

	if(input.value ==""){}
	input.setCustomValidity('');

	}
	<!DOCTYPE html>
	<html>
	<body>

	<form name="myForm">
	Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" value="11" />
	<input type="submit" />
	</form>

	</body>
	</html>
	if(document.myForm.quantity.checkValidity() === false){

	alert('fail');
	}
	if(document.myForm.checkValidity() === false){ //myForm is the name of the form element

	alert('fail');
	}
	input {display: block;
	border: 1px solid #ccc;
	}

	:invalid{
	border-color: #DB729C;
	-webkit-box-shadow: 0 0 5px rgba(27, 0, 97, .5);
	}

	:required{
	border-color: #1BE032;
	-webkit-box-shadow: 0 0 5px rgba(57, 237, 78, .5);
	}
	<form name="myForm" >
	Enter Your Name: <input type="text" name="myName" placeholder="Enter Your Name" oninput="updateMessage(this)" required>
	Enter Your Phone Number: <input type="tel" name="myPhone" pattern="\d\d\d-\d\d\d-\d\d\d\d" />
	Enter Your Email: <input type="email" name="myEmail" />
	<input type="submit" />

	</form>
	document.myForm.myName.setCustomValidity("To join our list, we at least need to know your name, please enter it here")

	function updateMessage(input){

	if(input.value ==""){}
	input.setCustomValidity('');

	}