Выделение инпутов и сообщения о необходимости заполнить пустые поля
Здравствуйте. Помогите пожалуйста решить следующую задачу. Имеется два инпута один для ввода имени, другой для фамилии. Если пользователь игнорит ввод данных и сразу жмет на кнопку, появляется сообщение о необходимости заполнить поля. В данном коде реализовано лишь выделение одного пустого инпута красной рамкой. А нужно чтобы оба поля выделялись рамками и над каждым из них появлялось сообщение о необходимости заполнить поля.
<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 { |
|
рони, а как сделать, чтобы еще и рамки инпутов подсвечивались красным?
https://javascript.ru/forum/css-html...tml#post512953 |
:required:invalid { border стили } |
Цитата:
<style> form { max-width: 20em; padding: 1em; margin: auto; font: 1em system-ui; } form > * { display: flex; flex-direction: column; margin-bottom: 1em; } input, button, select, textarea { font: inherit; } textarea { resize: vertical; } fieldset { border: 1px solid #f1f1f1; border-radius: 0.5em; flex-direction: row; } input:not([type]), input[type="tel"], input[type="email"], input[type="date"], input[type="number"], textarea { border: none; border-radius: 0.5em; background: #f1f1f1; padding: 0.5em; } span.error-message { padding: 0.5em; border-radius: 0.5em; color: #F44336; font-size: 80%; font-weight: bold; display: block; } :valid + span.error-message { display: none; } .err input:invalid { border: 2px solid #FF0000; } </style> <form> <label> Фамилия <input name="family" required autocomplete="family-name" minlength="1" pattern="\s*\S([\s\S]*\S)?\s*" data-custom-validity="Введите свою фамилию!"> </label> <label> Имя <input name="name" required autocomplete="given-name" minlength="1" pattern="\s*\S([\s\S]*\S)?\s*" data-custom-validity="Введите своё имя!"> </label> <label> Телефон <input name="phone" type="tel" required autocomplete="tel" data-custom-validity="Введите свой номер телефона!"> </label> <label> Э-почта <input name="mail" type="email" required autocomplete="email" data-custom-validity="Введите свой Email!"> </label> <label> Дата отправки <input name="date" type="date" required data-custom-validity="Введите дату!"> </label> <fieldset> <legend>Подтверждение</legend> <label> <input name="check" type="checkbox" required data-custom-validity="Подтвердите!"> Согласен с условиями </label> </fieldset> <fieldset> <legend>Пол</legend> <label> <input name="radio" type="radio" value="male" required autocomplete="sex" data-custom-validity="Выберите свой пол!"> Мужчина </label> <label> <input name="radio" type="radio" value="female" required autocomplete="sex" data-custom-validity="Выберите свой пол!"> Женщина </label> </fieldset> <label> Сообщение <textarea name="text" required minlength="10" maxlength="1500" data-custom-validity="Заполните поле (от 10 до 1500 символов)!"></textarea> </label> <label> Год рождения <input name="select" type="number" min="1880" max="2001" step="1" required autocomplete="bday-year" size="4" data-custom-validity="Введите год рождения (18+)"> </label> <button>Отправить</button> </form> <script> addEventListener("change", ({ target }) => { target.checkValidity() }); for(const element of document.querySelector("form").elements) { element.addEventListener("invalid", event => { event.preventDefault(); for(const label of event.target.labels) { for(const errorMessage of label.querySelectorAll(".error-message")) errorMessage.remove(); const errorMessage = document.createElement("span"); errorMessage.className = "error-message"; errorMessage.textContent = event.target.dataset.customValidity || event.target.validationMessage; label.append(errorMessage); label.classList.toggle("err", !event.target.validity.valid) } }); } </script> |
laimas,
а как изначально не выделять без скрипта? |
Цитата:
|
Цитата:
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> :required:invalid { border: 2px solid #FF0000; } </style> </head> <body> <form> <label> Фамилия <input name="family" required autocomplete="family-name" minlength="1" pattern="\s*\S([\s\S]*\S)?\s*" data-custom-validity="Введите свою фамилию!"> </label> </form> </body> </html> |
<style> :required:focus:invalid { border: 1px solid #f00; } </style> <input required="" placeholder="number" pattern="\d+" /> |
рони,
Спасибо |
Часовой пояс GMT +3, время: 12:11. |