custom message still showing after form input is filled

Question

I'm doing a client-side form validation while setting the custom warning messages, but that same pop-up message keeps showing even when the input is filled with the name.

For example i have an input field to get the user name on the code below:

<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>

And i wrote the javascript code below to change the default browser error message to the one below:

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

What am i doing incorrectly?

Answer 1

There were two issues in your JavaScript that were causing your validation to break:

• The validateForm function was running on page load, rather than when the user submits the form. I've added in a revised event handler to resolve this
• A spelling error was generating an error: setCustomValidty should be setCustomValidity

The following code fixes those issues.

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