Простая проверка формы для проверки пустых входов и отображения сообщения - PullRequest
Новая
       1

Простая проверка формы для проверки пустых входов и отображения сообщения

0 голосов
/ 17 июня 2019

Я пытаюсь проверить простую форму, где, если поле ввода пустое, пользователь увидит сообщение с просьбой заполнить все пустые поля.

Я могу выполнить цикл и найти, какиеполя пусты и отображают сообщение, но в сообщении будет отображаться только последнее введенное поле.Как получить сообщение для отображения всех пустых полей ввода?

HTML: 

<label>Name</label>
<input class=formInput" name="name" />

<label>Email</label>
<input class=formInput" name="email" />

<label>Message</label>
<textarea class=formInput" name="message" />

<span id="fail-message"></span>

JS: 

let inputFields = document.getElementsByClassName('formInput');

for (var i = 0; i < inputFields.length; i++) {
  if (inputFields[i].value === '') {
    document.querySelector('#fail-message').innerHTML =
      'Please fill out ' +
      inputFields[i].getAttribute('name') +
      ' field(s)';
  }
}

Это в настоящее время выводит "Пожалуйста, заполнитеполе (а) сообщения "

Если все пусто, я хотел бы вывести" Пожалуйста, введите имя, адрес электронной почты и поле (я) сообщения "

Ответы [ 4 ]

0 голосов
/ 18 июня 2019

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

Вот полный код, который будет работать для вас: 

<html>
<head>
    <script>
        function myFunction() {
            let inputFields = document.getElementsByClassName('formInput');
            let message =''; 
            for (var i = 0; i < inputFields.length; i++) {
                console.log(inputFields[i].value);
                if (inputFields[i].value === '') {
                        message = message + inputFields[i].getAttribute('name') + ', ';
                }
            }

            let n = message.lastIndexOf(",");
            message = message.substring(0,n); 

            document.querySelector('#fail-message').innerHTML =
                'Please fill out ' +
                message +
                ' field(s)';
        }
    </script>
</head>

<body>
    <label>Name</label>
    <input class="formInput" name="name" />

    <label>Email</label>
    <input class="formInput" name="email" />

    <label>Message</label>
    <textarea class="formInput" name="message"> </textarea>

    <button onclick="myFunction()">Submit</button>

    <span id="fail-message"></span>
</body>

</html>
0 голосов
/ 17 июня 2019

Вы перезаписывает innerHTML диапазона сообщения в каждой итерации.Вам следует объединить новую ошибку или использовать отдельные диапазоны.

0 голосов
/ 17 июня 2019

Вы должны были бы создать массив, содержащий недопустимые имена полей ... прямо сейчас, вы "перезаписываете" innerHTML элемента # fail-message самым последним полем (иначе, это ВНУТРИ вашего цикла, чтобыпереписывать каждый раз, когда условие выполняется в цикле).

Добавьте имена полей в массиве (не переписывайте весь массив), а затем используйте «yourArray.join ()» для вывода всех именв innerHTML правильного элемента, как вы делаете внутри цикла.

0 голосов
/ 17 июня 2019

Код, который вы перезаписывает innerHTML полностью каждый раз, когда он находит пустое поле. Вместо этого вам следует сохранить массив всех пустых полей, а затем записывать innerHTML только один раз после цикла со списком найденных полей. 

let inputFields = document.getElementsByClassName('formInput');
const emptyFieldNames = [];

for (var i = 0; i < inputFields.length; i++) {
  if (inputFields[i].value === '') {
    emptyFieldNames.push(inputFields[i].getAttribute('name'));
  }
}
if (emptyFieldNames.length > 0) {
    document.querySelector('#fail-message').innerHTML = 'Please fill out the following fields: ' + emptyFieldNames.join(', ');
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...