[рони]

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

строка 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>