显示带有表单元素的表单验证提示

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/

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"类是否为"hint"。(只是为了让你不会隐瞒一些无意的事情！)
• 我重构了prepareHint函数，使其可用于SELECT、INPUT和TEXTAREA
• 我把处理prepare提示的函数放在IIFE中，因为你可能只会做这一个。你可以在这里阅读更多关于IIFE的信息：http://benalman.com/news/2010/11/immediately-invoked-function-expression/
• 我没有直接对元素的样式进行样式操作，而是将它们移到了CSS类中。希望它更有意义

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