Form elements with on-active field highlighting & instruction spans


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



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.