Advanced Search

HTML5 Form Validation w/ jQuery Fallbacks

/ Published in: jQuery
Save to your folder(s)
Couple of ways to check if HTML5 form elements exist and use a fallback if they don't.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // don't forget this
  2. <script src="/jq/jquery.validate.js"></script>
  3. <script>
  4. jQuery(function() {
  5. 	if (!checkAttribute('input', 'required')) { // check for html5 validation
  6. 		jQuery("#form").validate(); // no? hey, use jQuery validate
  7. 	}
  8.  
  9.         if (!checkAttribute('input', 'autofocus')) { // check for html5 validation
  10.                 document.getElementById("q").focus(); // no? hey, use jQuery focus()
  11.         }
  12. });
  13.  
  14. function checkAttribute(element, attribute) { //the function
  15. 	var test = document.createElement(element);
  16. 	if (attribute in test) {
  17. 		return true;
  18. 	} else {
  19. 		return false;
  20. 	}
  21. }	
  22. </script>

URL: http://diveintohtml5.org/forms.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.