使用javascript addevent监听器在引导程序html表单上输入验证

Input validation on bootstrap html form with javascript addevent listener

本文关键字：表单 输入 验证 html 引导程序 javascript addevent 监听器 使用      更新时间：2023-09-26

我在用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("");
    }
}
相关文章：