JS中的表单验证消息

Question

我有验证问题。我希望在提交后每次错误的填充输入后显示文字'填写字段'。我有验证电子邮件的问题我不知道我应该怎么做。

JS

function onclickHandler() {
    var form = document.querySelector("#myForm"),
        fields = form.querySelectorAll(".requiredField"),
        error = form.querySelector(".error");

    for (var i = 0; i < fields.length; i++) {
        var field = fields[i];
        if (field.value == "") {
            error.innerHTML = '<p>Fill this field</p>';
        } else {
            console.log('ok');
            error.remove();
        }    
    }
}

HTML：

<div class="form-contact">
    <div class="item">
        <input type="text" placeholder="First Name*" > 
        <div class="error"></div>
    </div>
    <div class="item">
        <input type="text" placeholder="Last Name*"> 
        <div class="error"></div>
    </div>
    <div class="item">
        <input type="text" placeholder="Email Address*" class="email"> 
        <div class="error"></div>
    </div>
</div>

Answer 1

而不是通过检查空框的过程，使用所需的HTML布尔属性。

<input type="text" placeholder="First Name" required/>

这将确保用户无法提交，直到填写所有必需的标记输入字段。

此外，要验证电子邮件，也有一个输入类型。

<input type="email" placeholder="Email Address" class="email"/>

有关电子邮件输入类型的更多信息，请查看https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email。

希望这对你有所帮助。