Как отобразить «Пожалуйста, заполните это поле» для всех пустых и обязательных полей в форме HTML?

Question

У меня есть форма, показанная в скрипте https://jsfiddle.net/vrn7zx5h/3/, в которой я хочу показать предупреждающий знак «Пожалуйста, заполните это поле» одновременно для всех незаполненных обязательных полей.

Я нашел ответ на SO (как показано ниже), но я не уверен, как интегрироваться с скрипкой.

function checkName(val){
        if(/^[^-\s][\w\s]+$/.test(val)){
            return true;
        }else{
            if(val.length != 0){
                return false;
            }
        }
    }

Постановка задачи:

Мне интересно, какие изменения я должен внести в скрипту, чтобы вставленный выше ответ SO работал сскрипка

Answer 1

Обязательный атрибут Добавьте обязательный атрибут в форму.

Обязательный атрибут указывает браузеру отправлять форму только в том случае, если соответствующее поле заполнено.Очевидно, это означает, что поле нельзя оставлять пустым, но это также означает, что в зависимости от других атрибутов или типа поля будут приниматься только определенные типы значений.

Answer 2

Я думаю, это должно выглядеть так, если я понимаю, что вы имеете в виду

<form action="">
    Username: <input type="text" name="usrname">
    Password: <input type="password" name="Password">
    <input type="submit">
</form>
<p><strong>Note:</strong> The required attribute of the input tag is not
supported in Internet Explorer 9 and earlier versions.</p>
<script>
    // append the listeners
    document.forms[0].addEventListener('submit', function(evt){
        if([
            checkName(this.querySelector('[name="usrname"')),
            checkName(this.querySelector('[name="Password"'))
        ].some((v)=>v)) {
            evt.preventDefault()
        }
    })

    // check is empty, then notify
    function checkName(element){
        // if you just have to check if is empty, this is enough
        if(element.value) {
            return
        }
        notify(element)
        return true
    }

    // print the message
    function notify(element) {
        if(element.nextElementSibling.classList.contains('notify')) {
            return;
        }
        element.parentNode.insertBefore(
            Object.assign(document.createElement('p'),
            {
                className: 'notify',
                innerHTML: 'Please fill out this field for all empty and required fields'
            }
        ), element.nextSibling)
    }
</script>

Answer 3

В вашей форме добавляйте пустые элементы div после каждого элемента ввода.И вы можете условно отображать сообщения в div в вашей проверке.Например, если (name == '') {div.innerHTML = 'введите свое имя'}

Answer 4

Вот скрипка JS, которая покажет все ошибки одновременно.Это просто скелет и не модно.Вам нужно будет сделать это самостоятельно.Я также отключил встроенный валидатор с помощью novalidate в теге формы.https://jsfiddle.net/6kxc9hmq/1/ К вашему сведению: я также не включил функцию скрытия сообщения об ошибке при следующем запуске, если ввод теперь удовлетворяет условию.

По сути, я прикрепил обработчик события отправки к формеи если валидатор вернул false, я сказал форме не отправлять.Работает только на IE9 + (я думаю), все другие браузеры обычно в порядке с этим методом.Валидатор в основном просто проверяет, соответствует ли значение ввода указанному мною условию.

document.getElementById('form').addEventListener('submit', function(e) {
if(!validate())
    e.preventDefault();
});