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

Question

我使用这个java脚本函数来显示表单验证提示。 这个函数与输入元素一起工作正常。我的问题是我需要用其他表单元素修改这个函数，比如textarea，select box，checkbox ...任何人都可以告诉我该怎么做？

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

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

更新：根据OP的请求，允许在悬停时显示提示。

这是我基于非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版本 - 还有更多的改进空间，但希望这对您的任务来说已经足够了。