JS中的表单验证消息

时间:2017-12-19 22:49:19

标签: javascript jquery validation

我的验证有问题。 我想要显示文字并填写字段'在提交后每次错误的填充输入之后。我的验证邮件有问题我不知道该怎么办。

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>

1 个答案:

答案 0 :(得分:0)

不要经历检查空框的过程,而是使用所需的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

希望这对你有所帮助。