Проверить, полностью ли отправлена форма

У меня есть школьное задание, где меня просят создать форму пиццы с HTML и Javascript. Они запрашивают три поля - размер, имя и адрес.

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

Моя проблема в том, что я не понимаю, как проверить, заполнена ли форма.

Это код, который я написал до сих пор:

    function validateForm() {
        var errormessage = "";
        if (document.getElementById('name').value == "") {
        alert (errormessage += 'Please enter your name')
        return false;
        }
        if (document.getElementById('address').value == "") {
            alert (errormessage += 'Please enter your address')
            return false;
        }
    }
    alert("validations passed");
    return true;
}

<!DOCTYPE html>
    <html>
        <head>
            <title>Page Title</title>
        </head>
        <script src = "script2.js"> </script>
        <body>
            <h3> Pizza Order </h3>
            <form id = "pizza-form" onsubmit = "return fullForm()" method = "post">
                Full name: <br>
                <input type = "text" id = "name">
                <br>
                Address: <br>
                <input type = "text" id = "address">
                <br>
                Size: <br>
                <select name = "Size">
                <option value = "Large">Large</option>
                <option value = "Medium">Medium</option>
                <option value = "Small">Small</option>
                </select> <br><br>  
                <input type = "submit" value = "Order Pizza">
            </form>
           
        </body>
    </html>

Большое Вам спасибо.

Моя проблема в том, что я не понимаю, как проверить, заполнена ли форма -> что вы имеете в виду под full?

— 17.12.2018 13:37

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

— 17.12.2018 13:44

Привет, @Guy Sidon, тебе помог ответ? Если да, не могли бы вы отметить его как принятый? Спасибо

— 23.12.2018 00:48

javascript html

17.12.2018 13:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 4

Таким образом, как вы пытаетесь это сделать, отправка вашей формы вызывает fullForm().

Итак, измените свой javascript на:

    function fullForm() {
        var errormessage = "";

        if (document.getElementById('name').value == "") {
        alert (errormessage += 'Please enter your name')
        return false;
        }

        if (document.getElementById('address').value == "") {
            alert (errormessage += 'Please enter your address')
            return false;
        }

    alert("validations passed");



    return true;
}

17.12.2018 13:41

Добавьте условие else if с условием else, чтобы отправить действительную форму

Обновленный код:

<form id = "pizza-form" onsubmit = "return validateForm()" method = "post">

ваша функция validateForm():

function validateForm() {
 var errormessage = "";
 if (document.getElementById('name').value == "") {
  alert(errormessage += 'Please enter your name');
  return false;
 } else if (document.getElementById('address').value == "") {
  alert(errormessage += 'Please enter your address')
  return false;
 } else {
  return true;
 }
}

function validateForm() {
 var errormessage = "";
 if (document.getElementById('name').value == "") {
  alert(errormessage += 'Please enter your name');
  return false;
 } else if (document.getElementById('address').value == "") {
  alert(errormessage += 'Please enter your address')
  return false;
 } else {
  return true;
 }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title
    </title>
  </head>
  <script src = "script2.js"> </script>
  <body>
    <h3> Pizza Order 
    </h3>
    <form id = "pizza-form" onsubmit = "return validateForm()" method = "post">
      Full name: 
      <br>
      <input type = "text" id = "name">
      <br>
      Address: 
      <br>
      <input type = "text" id = "address">
      <br>
      Size: 
      <br>
      <select name = "Size">
        <option value = "Large">Large
        </option>
        <option value = "Medium">Medium
        </option>
        <option value = "Small">Small
        </option>
      </select> 
      <br>
      <br>  
      <input type = "submit" value = "Order Pizza">
    </form>
  </body>
</html>

17.12.2018 13:44

Вы близки к решению. В коде HTML исправьте имя функции onsubmit, а в функции javascript проверьте все значения вместе:

function validateForm()
{
  var errorMessage = '';
  var nameValue    = document.getElementById('name').value;
  var addressValue = document.getElementById('address').value;

  if (!nameValue)
    errorMessage += 'Please enter your name \n';
  if (!addressValue)
    errorMessage += 'Please enter your address ';

  if (errorMessage)
  {
    alert(errorMessage);
    return false;
  }
  else
  {
    alert('Name : ' + nameValue + '\n' + 'Address : ' + addressValue);
    return true;
  }
}

<h3> Pizza Order </h3>
<form id = "pizza-form" onsubmit = "return validateForm()">
  Full name: <br>
  <input type = "text" id = "name">
  <br>
  Address: <br>
  <input type = "text" id = "address">
  <br>
  Size: <br>
  <select name = "Size">
  <option value = "Large">Large</option>
  <option value = "Medium">Medium</option>
  <option value = "Small">Small</option>
  </select> <br><br>  
  <input type = "submit" value = "Order Pizza">
</form>

17.12.2018 13:50

Оптимизированное решение будет выглядеть следующим образом:

function validateForm() {
    const errorTable = ['name', 'address']

    const errorMessage = errorTable.map(elem => !!document.getElementById(elem).value ? '' : 'Please enter your ' + elem)

    console.info(errorMessage.join('\n'))
    return errorMessage.every(elem => elem === '')
}

<!DOCTYPE html>
    <html>
        <head>
            <title>Page Title</title>
        </head>
        <body>
            <h3> Pizza Order </h3>
            <form id = "pizza-form" onsubmit = "return validateForm()">
                Full name: <br>
                <input type = "text" id = "name">
                <br>
                Address: <br>
                <input type = "text" id = "address">
                <br>
                Size: <br>
                <select name = "size" id = "size">
                  <option value = "Large">Large</option>
                  <option value = "Medium">Medium</option>
                  <option value = "Small">Small</option>
                </select> <br><br>  
                <input type = "submit" value = "Order Pizza">
            </form>
        </body>
    </html>

Вам просто нужно ввести имя функции, которую вы хотите использовать для проверки, в атрибут onsubmit вашего HTML-элемента.

Теперь ваш тег формы выглядит так:

<form id = "pizza-form" onsubmit = "return validateForm()">

17.12.2018 13:53

Другие вопросы по теме

Стратегия HashLocation не работает в приложении angular 6

Прокрутка сообщений по одному в ключевых кадрах CSS

Как установить цвет фона для всех элементов с одним и тем же классом индивидуально на основе настраиваемого атрибута

Bootstrap Dropdown multipleselect Onchange не работает

Содержимое прокрутки должно быть скрыто

Добавление прозрачного оверлея в div

Уровень спецификации CSS

Youtube встраивать видео начало и конец проблема

Извлечение всех значений из массива объектов на основе значения ключей

Фон Google Chart

Проверить, полностью ли отправлена ​​форма

Ответы 4

Другие вопросы по теме

Похожие вопросы

Проверить, полностью ли отправлена форма