How to show all errors in fields at once during form validation?

N

Noah802021-10-05 17:53:45

JavaScript

Noah80, 2021-10-05 17:53:45

Good afternoon, I have a form with two fields.
Tell me, please, how to make it so that when you click on the button, all pop-ups for empty/incorrect fields are displayed at once? Now they are displayed one at a time (if both are empty, then only the first field will have a pop-up, and after filling in the first one, the second one, etc.), how to make them pop up all at once? Everything that I managed to google, using jquery and so on. And it is necessary on pure JS or without it.
Thank you!

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

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexander, 2021-10-05
@Aleksandr-JS-Developer

Tell me, please, how to make it so that when you click on the button, all pop-ups for empty/incorrect fields are displayed at once?

For all questions like "how to do A with action B" there is one universal answer.
You make a function that does only A. Then you listen to event B and, when B occurs, run your function that does A with the necessary parameters.
The question of how to listen to B or how to make A is another story.
The same applies to questions like " how, when using technology A, do B, with event C? ". In the same way as I wrote above, only information about how to listen and do B should be read not on MDN, but in the documentation for technology A.