Как сформировать json объект в случае «валидности» формы?

Question

Кирилл @wtc19

Как сформировать json объект в случае «валидности» формы?

Суть в том. Хочу сделать такую "штуку" чтобы при вводе данных, в случае ошибки выводилось "Мол вы не ввели определенное поле" а в случае успеха сформировывался JSON объект и выводился через console.log
Первую половину сделал, а вот над второй сижу "торможу". Уже перечитал по-несколько раз MDN. Но все-ровно туплю.

Вопрос задан более трёх лет назад
215 просмотров

1 комментарий

Подписаться 1 Оценить 1 комментарий

Кирилл @wtc19 Автор вопроса

Андрей Н: Вроде дошло. Почитал про query Selector. Можно это лучше оформить/оптимизировать?

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Test form</title>
</head>

<body>
    <header>
        <h1>Form</h1>
    </header>
    <div class="feedback">
        <form class="feedback-form" onsubmit="return validate();" action="" method="post">
            <div class="feedback-form-group">
                <label for="name">Ваше имя(обязательно)</label>
                <input type="text" name="name" id="name" class="contact-form__name">
            </div>
            <div class="feedback-form-group">
                <label for="phone">Ваш номер телефона(обязательно)</label>
                <input type="number" name="phone" id="phone" class="contact-form__phone" pattern="^([1-9]{1})|([1-9]{1}\d+)$">
            </div>
            <div class="feedback-form-group">
                <label for="mark">Марка автомобиля</label>
                <input type="text" name="mark" id="mark" class="contact-form__mark">
            </div>
            <div class="feedback-form-group">
                <label for="model">Модель автомобиля</label>
                <input type="text" name="model" id="model" class="contact-form__model">
            </div>
            <div class="checkbox-area">
                <label>Тип коробки передач</label>
                <label for="gear"><br>
                    <input type="radio" name="gear" checked> Автомат
                </label>
                <label for="gear">
                    <input type="radio" name="gear"> Механика
                </label>
            </div>
            <div class="feedback-form-group">
                <label for="price">Бюджет</label>
                <input type="number" name="price" id="price" class="contact-form__price" pattern="^([1-9]{1})|([1-9]{1}\d+)$">
            </div>
            <input type="submit" class="btn btn-default" name="submit" value="Отправить">
        </form>
    </div>
    <footer>

    </footer>
    <script>
        function validate() {
            var userName = document.getElementById("name");
            var userPhone = document.getElementById("phone");
            var autoMark = document.getElementById("mark");
            const data = {
                name: document.querySelector('.contact-form__name').value,
                phone: document.querySelector('.contact-form__phone').value,
                mark: document.querySelector('.contact-form__mark').value,
                model: document.querySelector('.contact-form__model').value,
                price: document.querySelector('.contact-form__price').value
            }

            if (!userName.value) {
                alert("Вы забыли ввести Ваше имя");
                return false;
            }
            if (!userPhone.value) {
                alert("Вы забыли ввести Ваш телефон");
                return false;
            }
            if (!autoMark.value) {
                alert("Вы забыли ввести марку авто");
                return false;
            }

            // В случае успеха формируем JSON. И передаем его в консоль
            //Буду пробовать два метода: Первый, это задать форме id и достать значение
            //через document.forms[id].elements / То есть в элементс будет объект со всеми полями.
            //Второй, это достать полям классы и достать значения каждого поля вручную.
            console.log(data);

        }
    </script>

</body>

</html>

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Fullstack-разработчик на JavaScript + ИИ

11 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее