我希望在文本输入无效时显示有关它的工具提示
function check() {
var ok = true;
regLast = /^[a-zA-Z]{2,20}$/;
if (!regLast.test(document.getElementById("lastName").value)) {
ok = false;
}
return ok;
}
<div class="form-group">
<label for="lastName">Last name:</label>
<input type="text" class="form-control" id="lastName" placeholder="Put your last name" name="lastName" />
</div>
我知道如何把一个文本放在一个div下,一个document.getElementById("wronglastnamediv").innerHTML = "Put valid last name"
的输入
但我不知道如何把一个工具提示在这些文本区域时,它是无效的。
3条答案
按热度按时间4urapxun1#
您应该相应地编辑下面的代码,并链接jquery 1.7或更高版本-
希望代码对您有用。
纯Javascript
nlejzf6q2#
你可以像这样为输入域添加工具提示。使用
setAttribute('title', 'some tooltip')
设置工具提示,使用removeAttribute('title')
从输入域删除工具提示。我在输入字段中添加了输入事件侦听器,它在每次键入字符时执行输入值验证,并根据验证结果添加或删除工具提示。
如果你只输入一个字符并将鼠标悬停在输入字段上,你应该会看到工具提示。如果你输入第二个字符,它就会消失(注意,你需要将鼠标光标移出输入字段,然后再移回来才能真正看到工具提示)。
如果你需要一些更复杂和更“可视”的东西,你可以使用css和数据属性相结合,逻辑和前面的代码一样,根据验证的结果,你可以在输入域中添加一个数据属性或者删除它。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
要在表单提交时添加工具提示而不是悬停,您可以使用
submit-event listener
并执行与前面相同的代码,但是您还需要添加event.preventDefault();
,以防止表单在验证失败时提交(并且您需要稍微更改css)。当你现在点击提交按钮时,如果输入值不正确,你应该会看到工具提示。
yxyvkwin3#
您可以简单地使用HTML5 Form Validation(如果您不需要自定义工具提示)。
请参见下面的代码片段:
当
oninvalid
事件发生时,您也可以使用setCustomValidity
函数来更改必填字段的默认消息。示例: