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

Question

我使用这个java脚本函数来显示表单验证提示。这个函数可以与输入元素一起正常工作。我的问题是我需要用其他表单元素(例如文本区域、选择框、复选框)修改这个函数...有人能告诉我该怎么做吗？

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

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/