我在用javascript中的addeventlistener验证html中文本框元素的值时遇到了困难。它无法通过以下方式正确验证我的输入:
1) 显示"字段为空",即使我在该文本框中有值。2) 只有当我单击提交时才进行验证<--(当用户点击文本框时,我如何执行验证?)
以下是相关的html代码(带有引导程序类):
<div class ="col-lg-8">
<div class="form-group">
<label for="inputfirstName" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfirstName"
placeholder="Enter First Name" />
</div>
</div>
以下是相关的javascript代码,用于判断"名字"文本框字段是否为空,如果为空,则应返回自定义验证错误
window.addEventListener('load',init);
function init()
{
var firstname = document.getElementById("inputfirstName");
firstname.addEventListener('onmouseclick',validateFirstname(firstname));
}
function validateFirstname(e){
var checker = e.value;
if (checker == ""){
e.setCustomValidity("This field must not be blank !");
}
}
我真的不确定您何时要验证您的输入。目前,您正在听用户点击您的文本框,并在那一刻执行验证。
但是,由于您只是在调用e.setCustomValidity时添加验证错误,因此在您发布表单之前,它不会显示。这是由setCustomValicity设计的。这里有更详细的解释:如何在不通过jQuery 提交的情况下强制进行html5表单验证
要在用户输入文本后验证文本框,您需要使用输入和更改事件。当用户在文本框中键入内容时,会触发输入,在用户离开文本框后更改。要触发验证,无论用户是否关注该字段,您还必须将输入设置为"必需"。然后,为了显示您的消息,而不是HTML5标准要求的消息,您还必须将无效事件添加到事件侦听器中。你可以在这里找到一个更精细的答案,以及如何在这里完成这项工作的完整代码:设置自定义HTML5必需的字段验证消息
<input type="text" class="form-control" id="inputfirstName"
placeholder="Enter First Name" required="required"/>
window.addEventListener('load',init);
function init()
{
var firstname = document.getElementById("inputfirstName");
firstname.addEventListener('input',validateFirstname(firstname));
firstname.addEventListener('change',validateFirstname(firstname));+
}
function validateFirstname(e){
var checker = e.value;
if (checker == ""){
e.setCustomValidity("This field must not be blank !");
}
else{
e.setCustomValidity("");
}
}