How to show form validation errors in inputs NOT one by one in popups?

Question

How to show form validation errors in inputs NOT one by one in popups?

3.3k Views Asked by Noel M. At 05 October 2021 at 14:31

I have a very simple form here with 2 required inputs.

When you click submit button without filling them - there are popups saying that you should do it. The problem is that popups are showed one by one - for example, if both inputs arent filled, only the first input will have this popup. And when the first one is filled only then it goes to the second and vice versa.

Is there any way to show all the fields that are not filled/filled incorrect during the validation at the same moment? So the user sees immediately everything he/she has to fill?

I am quite new to this, so please help me find the solution in pure JS (if it is about JS). Here is the code:

<html lang="eng">

<head>
    <title>Title</title>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
</head>

<body>
    <form id="mainForm" action="#" method="POST">
        <div>
            <div>
                <label for="first_name" title="first_name">First name<span class="mandatory">*</span></label>
                <input id="first_name" name="first_name" type="text" value="" required=""
                    oninvalid="setCustomValidity('Enter first name')" oninput="setCustomValidity('')"
                    placeholder="Enter first name">
                <p class="error_message"></p>
            </div>
            <div>

                <label for="lastName" title="lastName">Last name<span class="mandatory">*</span></label>
                <input id="lastName" name="lastName" type="text" value="" required=""
                    oninvalid="setCustomValidity('Enter last name')" oninput="setCustomValidity('')"
                    placeholder="Enter last name">
                <p class="error_message"></p>
            </div>

            <div class="">
                <input class="email_btn btn btn-block" type="submit" value="Submit">
            </div>
        </div>
    </form>
</body>

</html>

Original Q&A

There are 1 best solutions below

**andiOak** · Answer 1 · 2021-10-05T20:09:00.273000

The code you provided is using a built in function of JavaScript, setCustomValidity(). This most likely is the reason for the pop-up. Instead we can write a custom function to show a little paragraph/span with the text instead.

Here we have a HTML form, but with a call for the custom function validateFields(), when clicking the Submit button:

<form class="" action="your-post-page.html" method="post" id="my-form-id" name="my-form-name" onsubmit="return validateFields()" target="_blank" class="validate" novalidate="">

    <input id="name_1" type="text">
    <br><br>
    <input id="name_2" type="text">
    <br><br>
    <input id="name_3" type="text">
    <br><br>

    <input type="submit" name="" value="SUBMIT FORM">
</form>
<p id="error_messages" style="background-color: red; color: white;"></p>

The JS that makes it happen:

(custom function that reacts to inputs being empty and lets the user know which fields need fixing, put code before the </html> tag in your html-page)

<script type="text/javascript">

    function validateFields() {

        // reference to the message paragraph we aim to fill with error messages.
        var error_text_output_element = document.getElementById("error_messages");

        var fields_to_check = ["name_1", "name_2", "name_3"]; // enter the IDs of all fields you want to check for errors in this list.
        var fields_human_names = ["Name 1", "Name 2", "Name 3"]; // these are just the human readable names for the fields.

        var check_field;
        var error_message = "Errors occurred, please fill in these fields: "; // setting basic text here.
        var errors_exist = 0;

        for (var i = 0; i < fields_to_check.length; i++) {

            check_field = document.forms["my-form-id"][fields_to_check[i]].value;

            if (check_field == "") {

                if (errors_exist === 0) {
                    error_message += fields_human_names[i];  // first time we add a field, no comma.
                } else {
                    error_message += ", " + fields_human_names[i]; // for each field that was empty, add the field and the comma.
                }

                errors_exist += 1; // increment with one for each error that occurs.
            }

        }

        if (errors_exist > 0) { // only output error messages or stop the form if any fields are empty.

            error_text_output_element.innerHTML = error_message;
            return false; // stops the sending of the form in the post procedure.
        }

    } // end message_class function.

</script>

Now lastly, here is your own code with this example:

<html lang="eng">
<head>
    <title>Title</title>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<body>
    <form id="mainForm" action="#" method="POST" onsubmit="return validateFields()" >
        <div>
            <div>
                <label for="first_name" title="first_name">First name<span class="mandatory">*</span></label>
                <input id="first_name" name="first_name" type="text" value="" placeholder="Enter first name">
                <p class="error_message"></p>
            </div>
            <div>

                <label for="lastName" title="lastName">Last name<span class="mandatory">*</span></label>
                <input id="lastName" name="lastName" type="text" value="" placeholder="Enter last name">
                <p class="error_message"></p>
            </div>

            <div class="">
                <input class="email_btn btn btn-block" type="submit" value="Submit">
            </div>
            <!-- here I added a new box for the error messages in your code -->
            <div class="">
                <p id="error_messages" style="background-color: red; color: white;"></p>
            </div>
        </div>
    </form>
</body>

<script type="text/javascript">

    function validateFields() {

        // reference to the message paragraph we aim to fill with error messages.
        var error_text_output_element = document.getElementById("error_messages");

        var fields_to_check = ["first_name", "lastName"]; // enter the IDs of all fields you want to check for errors in this list.
        var fields_human_names = ["First name", "Last name"]; // these are just the human readable names for the fields.

        var check_field;
        var error_message = "Errors occurred, please fill in these fields: "; // setting basic text here.
        var errors_exist = 0;

        for (var i = 0; i < fields_to_check.length; i++) {

            check_field = document.forms["mainForm"][fields_to_check[i]].value;

            if (check_field == "") {

                if (errors_exist === 0) {
                    error_message += fields_human_names[i];  // first time we add a field, no comma.
                } else {
                    error_message += ", " + fields_human_names[i]; // for each field that was empty, add the field and the comma.
                }

                errors_exist += 1; // increment with one for each error that occurs.
            }

        }

        if (errors_exist > 0) { // only output error messages or stop the form if any fields are empty.

            error_text_output_element.innerHTML = error_message;
            return false; // stops the sending of the form in the post procedure.
        }

    } // end message_class function.

</script>

</html>

That was with custom scripting to get a box that you can style and enhance yourself, in this case below the form. But if you are okay with some default (and perhaps not unified styling, due to browser differences) you can also just remove the JavaScript function you had in your original code, the setCustomValidity(''). That will leave you with a generic message using the already present attribute required="", which produces this:

To achive that behaviour, change your tags for each field to look like this instead:

<input id="first_name" name="first_name" type="text" value="" required="" placeholder="Enter first name">

How to show form validation errors in inputs NOT one by one in popups?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in FORMS

Related Questions in VALIDATION

Related Questions in CONSTRAINT-VALIDATION-API

Trending Questions

Popular # Hahtags

Popular Questions