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

[Lefseq]

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

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

[рони]

Lefseq,
валидация формы
пример правильно оформленной формы

[Lefseq]

рони, а как сделать, чтобы еще и рамки инпутов подсвечивались красным?
https://javascript.ru/forum/css-html...tml#post512953

[laimas]

:required:invalid {
    border стили
}

[рони]

рамки инпутов подсвечивались красным?

строка 45 и 138

<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,
а как изначально не выделять без скрипта?

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

[laimas]

<style>
:required:focus:invalid {
    border: 1px solid #f00;
}
</style>
<input required="" placeholder="number" pattern="\d+" />

[Lefseq]

рони,
Спасибо