Добрый день, есть форма с двумя полями.
Подскажите, пожалуйста, как сделать, чтобы при нажатии на кнопку отображались все сразу поп апы у незаполненных/заполненных неверно полей? Сейчас они отображаются по одному (если пустые оба, то поп ап будет только у первого поля, а после заполнения первого - у второго и тд), как сделать, чтобы выскакивали все сразу? Все, что удалось нагуглить, с использованием jquery и тд. А нужно на чистом JS или без него.
Спасибо!
<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>