Question

我在使用我的javascript中的addeventlistener验证html中文本框元素的值时遇到了困难。它没有通过以下方式正确验证我的输入：

1）即使我在该文本框中有值，也显示“字段为空”。 2）仅在我点击提交时验证。＆lt; - （如何在用户点击文本框时执行验证？）

以下是相关的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 !");

    }
}

Answer 1

当您想要验证输入时，我不确定。目前，您正在收听用户点击文本框并在此刻执行验证。

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

要在用户输入文本后验证文本框，您可以使用输入和更改事件。当用户在文本框中键入内容时输入触发，在用户离开文本框后更改。无论用户是否专注于该字段，都要触发验证，您还必须将输入设置为“必需”。然后，要显示您的消息而不是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("");
    }
}

使用javascript addeventlistener在bootstrap html表单上输入验证

1 个答案: