填写表单输入后仍显示自定义消息

Question

我在设置自定义警告消息时正在执行客户端表单验证，但即使输入中填充了名称，同样的弹出消息也会继续显示。

例如，我有一个输入字段来获取下面代码中的用户名：

<form id="form" name="contactForm" method="post" action="php/formulario_contactos.php">
            <div>
                <label for="name">Your name</label> 
                <input type="text" id="name" name="name" required="">

            </div>
            <div>
                <label for="mail">Your email</label>
                <input type="email" id="mail" name="user_mail" required="">
            </div>                
            <div>
                <label for="topic">Select Topic</label>
                <select id="topic" name="topic" required="">
                    <option selected disabled hidden value="">Choose a Topic</option>
                    <option value="link">Site Link</option>
                    <option value="copyright">Copyright</option>
                    <option value="errors">Site/Article errors</option>
                    <option value="feedback">Feedback</option>
                    <option value="other">Other</option>
                </select>
            </div>                
            <div>
                <label for="msg">Your message</label>
                <textarea id="msg" name="user_message" required=""></textarea>
            </div>                
            <div class="button">
                <button type="submit">Submit</button> 
            </div>
        </form>

我编写了下面的 javascript 代码，将默认浏览器错误消息更改为以下内容：

var inputName = document.getElementById('name');
var form = document.getElementById('form');

form.onsubmit = validateForm();

function validateForm() {

     if(inputName.value === ""){
         inputName.setCustomValidity("Name is required");
         return false;
     } else {
         inputName.setCustomValidty("");
     }
}

我做错了什么？

Answer 1

您的 JavaScript 中有两个问题导致您的验证失败：

• validateForm 函数在页面加载时运行，而不是在用户提交表单时运行。我添加了一个修改后的事件处理程序来解决这个问题
• 拼写错误导致错误：setCustomValidty 应该是 setCustomValidity

以下代码修复了这些问题。

HTML：

<form id="form" name="contactForm" method="post" action="php/formulario_contactos.php">
    <div>
        <label for="name">Your name</label> 
        <input type="text" id="name" name="name" required="">

    </div>
    <div>
        <label for="mail">Your email</label>
        <input type="email" id="mail" name="user_mail" required="">
    </div>                
    <div>
        <label for="topic">Select Topic</label>
        <select id="topic" name="topic" required="">
            <option selected disabled hidden value="">Choose a Topic</option>
            <option value="link">Site Link</option>
            <option value="copyright">Copyright</option>
            <option value="errors">Site/Article errors</option>
            <option value="feedback">Feedback</option>
            <option value="other">Other</option>
        </select>
    </div>                
    <div>
        <label for="msg">Your message</label>
        <textarea id="msg" name="user_message" required=""></textarea>
    </div>                
    <div class="button">
        <button id="submit" type="submit">Submit</button> 
    </div>
</form>

JavaScript：

var inputName = document.getElementById('name');
var form = document.getElementById('form');
var submitButton = document.getElementById("submit");

submitButton.onclick = function () { validateForm(); };

function validateForm() {
    if(inputName.value === ""){
        inputName.setCustomValidity("Name is required");
        return false;
    } else {
        inputName.setCustomValidity("");
    }
}