使用表单元素显示表单验证提示

Question

我使用此Java脚本函数来显示表单验证提示。此功能正常与输入元素..我的问题是我需要修改此功能与其他表单元素，如textarea，选择框，复选框......任何人都可以告诉我我怎么能做到这一点？

这是我一直在使用功能..

function prepareInputsForHints() { 
    var inputs = document.getElementsByTagName("input"); 
    for (var i=0; i<inputs.length; i++){ 
     // test to see if the hint span exists first 
     if (inputs[i].parentNode.getElementsByTagName("span")[0]) { 
      // the span exists! on focus, show the hint 
      inputs[i].onfocus = function() { 
       this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; 
      } 
      // when the cursor moves away from the field, hide the hint 
      inputs[i].onblur = function() { 
       this.parentNode.getElementsByTagName("span")[0].style.display = "none"; 
      } 
     } 
    } 
    // repeat the same tests as above for selects 
    var selects = document.getElementsByTagName("select"); 
    for (var k=0; k<selects.length; k++){ 
     if (selects[k].parentNode.getElementsByTagName("span")[0]) { 
      selects[k].onfocus = function() { 
       this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; 
      } 
      selects[k].onblur = function() { 
       this.parentNode.getElementsByTagName("span")[0].style.display = "none"; 
      } 
     } 
    } 
} 

就是HTML

<div> 
    <label for="mobile">Mobile<img alt="required" src="images/required_star.png"> :</label> 
    <input id="mobile" class="text" type="text" maxlength="10" name="mobile" title="Eg: 0714556260"/> 
    <span class="hint">Use a 10 digits length number<span class="hint-pointer">&nbsp;</span></span> 
</div> 

我想这样的事情与textarea的，但它是不工作...

<div> 
    <label for="qualification">Qualification Details<img alt="required" src="images/required_star.png">:</label> 
    <textarea id="qualification" class="textarea" rows="4" cols="30" name="qualification"></textarea> 
     <span class="hint">Describe about you<span class="hint-pointer">&nbsp;</span></span> 

</div> 

Answer 1

$(document).ready(function() { 
$(".hint").css({ "display":"none" }); 
$("input.hint_needed, select.hint_needed, textarea.hint_needed, radio.hint_needed").on("mouseenter", function() { 
$(".hint").css({ "display":"inline" }); 
}).on("mouseleave", function() { 
$(".hint").css({ "display":"none" }); 
}); 
});​ 

<textarea id="qualification" class="hint_needed" rows="4" cols="30" name="qualification"></textarea> 

你可以使用这个！

http://jsfiddle.net/QD3Hn/1/

Answer 2

更新：每个操作的要求，允许在悬停显示提示也是如此。

这里是我所基于非jQuery的执行代码： （的jsfiddle：http://jsfiddle.net/E9njP/）

<div> 
    <label for="mobile">Mobile* :</label> 
    <input id="mobile" class="text" type="text" maxlength="10" name="mobile" /> 
    <span class="hint">Use a 10 digits length number</span> 
</div> 
<div> 
    <label for="qualification">Qualification Details*:</label> 
    <textarea id="qualification" class="textarea" rows="4" cols="30" name="qualification"></textarea> 
    <span class="hint">Describe about you</span> 
</div> 
<div> 
    <label for="dropdown">Dropdown*:</label> 
    <select id="dropdown"><option>A</option><option>B</option></select> 
    <span class="hint">Hints for Select</span> 
</div> 

<!-- This is just for demo purpose --> 
<div> 
    <label>Tricky Input:</label> 
    <input/> 
    <span>Don't hide me! I am not a hint!</span> 
</div> 

...取而代之的元素做CSS的，我使用CSS来代替。下面是类...

div span.hint { 
    display: none; 
} 

div span.over, 
div span.focus { 
    display: inline; 
} 

...这是JavaScript的...

(function() { 
    // Since it's likely that you'll only ever run this function once 
    // (Once you attached the events, you'll probably never reuse this 
    // function again), I put it inside an IIFE to keep it "clean". 

    /** 
    * Toggle class on element without jQuery... 
    * 
    * @param {DOMElement} el Element to apply CSS to 
    * @param {string} css CSS class name to be applied 
    * @param {boolean} on Determine whether class name should be on the element or not 
    **/ 
    function getHandler(el, css, on) { 
     return function() { 
      // If we want to add CSS to the element, and it doesn't exist on the 
      // element yet, add it. 
      if (on && el.className.indexOf(css) === -1) { 
       el.className += ' ' + css; 
      } 
      // If we want to remove CSS from the element, and it exists, remove 
      // it. 
      else if (!on && el.className.indexOf(css) >= 0) { 
       el.className = el.className.replace(css, ''); 
      } 

      // NOTE This solution will lead to extra spacing in CSS name... 
     }; 
    } 

    function setHandler(inputEl, hintEl) { 
     // the span exists! on focus, show the hint 
     inputEl.onfocus = getHandler(hintEl, "focus", true); 
     inputEl.onmouseover = getHandler(hintEl, "over", true); 

     // when the cursor moves away from the field, hide the hint 
     inputEl.onblur = getHandler(hintEl, "focus", false); 
     inputEl.onmouseout = getHandler(hintEl, "over", false); 
    } 

    function prepareHintsByTag(tag) { 
     var inputs = document.getElementsByTagName(tag); 
     for (var i=0; i<inputs.length; i++){ 
      // test to see if the hint span exists first 
      if (inputs[i].parentNode.getElementsByTagName("span")[0]) { 
       var hintEl = inputs[i].parentNode.getElementsByTagName("span")[0]; 

       // Show "hint" only if it has the class of "hint" 
       if (hintEl.className.indexOf("hint") === 0) { 
        setHandler(inputs[i], hintEl); 
       } 
      } 
     } 
    } 

    // Scan the code  
    prepareHintsByTag("input"); 
    prepareHintsByTag("textarea"); 
    prepareHintsByTag("select"); 
})(); 
    ​ 

添加几件事情的代码...

• 默认情况下，这些提示可能应该隐藏起来。我在CSS中做了一个默认。
• 在切换CSS之前，检查“span”类是否为“提示”。 （只是所以你不会隐藏那些没用的东西！）
• 我重构了prepareHint函数，所以它可以重用SELECT，INPUT和TEXTAREA。
• 我把处理准备提示的函数放在一个IIFE中，因为它很可能只会做这个。你可以在这里阅读更多关于IIFE的信息：http://benalman.com/news/2010/11/immediately-invoked-function-expression/
• 不是直接对元素的样式进行样式操作，而是将其移动到CSS类中。它应该更有意义...

这又是非jQuery版本 - 有更多的空间用于改进，但希望这可以满足您的任务。