Advanced Search

Form elements with on-active field highlighting & instruction spans

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. jQuery:
  2.  
  3. // hide all instructions
  4. $('.defaultForm li > .instructions').hide();
  5.  
  6. function hilite(elem){
  7.   // remove any previously selected hilite's and instructions if any
  8.   $('.defaultForm li.selected .instructions').hide();
  9.   $('.defaultForm li.selected').removeClass("selected");
  10.  
  11.   // hilite and show instructions if any
  12.   elem.parent('li').addClass("selected");
  13.   elem.parent('label').parent('li').addClass("selected");
  14.   elem.siblings('.instructions').show();
  15.   elem.parent().siblings('.instructions').show();	
  16. }
  17.  
  18.  
  19. // on focus tests for various types of form elements
  20. var inputFocused = false;
  21.  
  22. // input fields
  23. $('.defaultForm * > input').focus(function () {	
  24. 	// check to see if input field is not a button
  25. 	if( !$(this).attr("src") || $(this).attr("value") != "submit"){ 
  26. 		hilite($(this));
  27. 	}
  28. 	inputFocused = true;
  29. });
  30.  
  31. // radio and checkboxes only get detected with onclick (or tab) for chrome/safari
  32. if(!inputFocused){
  33. 	$('.defaultForm * > input').click(function () {	
  34. 		// check to see if input field is not a button
  35. 		if( !$(this).attr("src") || $(this).attr("value") != "submit"){ 
  36. 			hilite($(this));
  37. 		}	  
  38. 	});
  39. }
  40.  
  41. // text areas
  42. $('.defaultForm * > textarea').focus(function () {
  43.   hilite($(this));	  
  44. });
  45.  
  46. // select boxes
  47. $('.defaultForm * > select').focus(function () {
  48.   hilite($(this));	  
  49. });
  50.  
  51.  
  52. HTML Markup:
  53. <form name="formExample" id="formExample" action="">
  54. <ul class="defaultForm">
  55. <li>
  56.     <label for="name">Your Full Name:</label><input name="name" type="text" class="inputText onehalf" />
  57.     <span class="required">*</span><span class="error">! Please enter your full name</span>
  58.     <span class="instructions">Please enter your full name</span>
  59. </li>
  60. </ul>
  61. </form>
  62.  
  63.  
  64. CSS:
  65. ul.defaultForm{}
  66. ul.defaultForm li{clear:left; padding:6px 0 2px; line-height:180%;}
  67. ul.defaultForm li.selected{background-color:#F5F5F5;}
  68. ul.defaultForm li label{float:left; width:150px; padding-right:20px; margin-top:-2px; font-weight:normal; text-align:right;}
  69. ul.defaultForm li label.radio,
  70. ul.defaultForm li label.checkbox{float:none; width:auto;}
  71. ul.defaultForm li .required{padding-left:5px;}
  72. ul.defaultForm li .error{display:block; margin-left:170px; color:#D71111; font-weight:bold; display:none; }
  73. ul.defaultForm li .instructions{display:block; margin-left:170px; color:#666;}
  74.  
  75. .onethird{width:33%;}
  76. .fortypercent{width:40%}
  77. .onehalf{width:50%;}
  78. .twothirds{width:66%;}
  79. .fullwidth{width:100%;}

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.