Выделение инпутов и сообщения о необходимости заполнить пустые поля

D
На сайте с 01.09.2015
Offline
56
306

Здравствуйте. Помогите пожалуйста решить следующую задачу. Имеется два инпута один для ввода имени, другой для фамилии. Если пользователь игнорит ввод данных и сразу жмет на кнопку, появляется сообщение о необходимости заполнить поля. В данном коде реализовано лишь выделение одного пустого инпута красной рамкой. А нужно чтобы оба поля выделялись рамками и над каждым из них появлялось сообщение о необходимости заполнить поля.


<p>
<input id="inp" class="name" autocomplete="name" name="name" placeholder="Ваше имя" required />
</p>
<p>
<input id="inp" class="lastname" autocomplete="lastname" name="lastname" placeholder="Ваша фамилия" required />
</p>

<button id="openwindow">Отправить</button>

<div id="window9">
<p>Содержимое окна</p>
<button onclick="show('none')" id="closewindow9">X</button>
</div>


"use strict";

let inp = document.getElementById("inp");

inp.addEventListener("mousedown", () => {
inp.classList.remove("isNotValid");
});

inp.addEventListener("blur", valid.bind(null, inp));

document.getElementById("openwindow").addEventListener("click", () => {
if (!valid(inp)) return false;
show("block");

});

function valid(inp) {
if (!inp.value) {
inp.classList.add("isNotValid");
return false;
}
return true;
}

function show(state) {
// if (state === "block") {
// timer = window.setTimeout(move, 0);
// } else {
// clearTimeout(timer);
// }
document.getElementById('window9').style.display = state;
// document.getElementById('wrap9').style.display = state;

}


#window9 {
width: 500px;
height: 300px;
margin: auto;
display: none;
background: #fff;
border: 1px solid #365E97;
z-index: 200;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 15px 30px 30px 30px;
vertical-align:middle;
-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
box-shadow:0 5px 15px rgba(0,0,0,.5);
}


#closewindow9 {
background-color: red;
position: absolute;
right: 0;
top: 0;
}

.name {
border: 1px solid #eeeeee;
}

.isNotValid {
border: 2px solid #ff0000;
}
D.iK.iJ
На сайте с 26.05.2013
Offline
179
#1

Э... а что мешает и второму полю поставить required?

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
S
На сайте с 30.09.2016
Offline
459
#2
DiKiJ:
Э... а что мешает и второму полю поставить required?

Ну по-видимому, домашнее задание у ТС сформулировано как "реализовать это на javascript".

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
O1
На сайте с 24.04.2019
Offline
10
#3
DiKiJ:
второму полю поставить required

Там есть оно. как и два инпута с одинаковым input id="inp". Тут совет один - матчасть подтянуть.

Z0
На сайте с 03.09.2009
Offline
730
#4

Да, у ТС два id одинаковых, надо их заменить на классы или на другой атрибут какой разный и делать проверку по ним :)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий