使用 javascript addeventlistener 在引导 html 表单上输入验证答案

【问题标题】：Input validation on bootstrap html form with javascript addevent listener使用 javascript addeventlistener 在引导 html 表单上输入验证
【发布时间】：2014-10-22 04:53:24
【问题描述】：

我在使用我的 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 !");

    }
}

【问题讨论】：

标签： javascript twitter-bootstrap validation input

【解决方案1】：

我不太确定，什么时候你想验证你的输入。目前，您正在聆听用户点击您的文本框并在那一刻执行验证。

但是，由于您只是在调用 e.setCustomValidity 时添加了验证错误，因此在您发布表单之前它不会显示。这是由 setCustomValidity 设计的。这里有更详细的解释：How to force a html5 form validation without submitting it via jQuery

要在用户输入文本后验证您的文本框，您可以使用 input 和 change 事件。当用户在您的文本框中输入内容时，输入触发，在用户离开文本框后更改。无论用户是否关注该字段，要触发验证，您还必须将输入设置为“必需”。然后，要显示您的消息而不是 HTML5 的标准必需消息，您还必须将无效事件添加到事件侦听器中。您可以在此处找到更精确的答案以及如何在此处完成此操作的完整代码：Set custom HTML5 required field validation message

<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("");
    }
}

【讨论】：