Shitcode to code

Question

Сделал форму валидации на обычном JS. Из-за малого опыта у меня тут куча if, не могу передать координаты Яндекс.Карт в другую функцию для валидации и ещё неизвестно что. С координатами я "костыльнул" сохранив их в невидимый div :-) свой Api key удалил, поэтому координаты в примере получить не получится, не знаю стоит ли его в открытый доступ давать ключ :-) Код рабочий.

Подскажите как можно код уменьшить или как валидацию по кнопке сделать без моего костыля с div'ом :-)

let errorName = document.querySelector(".name-error");
let errorNumber = document.querySelector(".number-error");
let errorEmail = document.querySelector(".email-error");
let errorMap = document.querySelector(".map-error");
let completed = document.querySelector(".mailForm__completed");

function viodChecker() {
    let name = document.querySelector(".mailForm__name").value;
    let number = document.querySelector(".mailForm__number").value;
    let Email = document.querySelector(".mailForm__email").value;
    let Coords = document.querySelector(".coords");
        if (name === "") {
            errorName.style.display = "block";
        }
        if (name !== "") {
            errorName.style.display = "none";
        }
        if (number === "") {
            errorNumber.style.display = "block";
        }
        if (number !== "") {
            errorNumber.style.display = "none";
        }
        if (Email.indexOf("@") === -1) {
            errorEmail.style.display = "block";
        }
        if (Email.indexOf("@") !== -1) {
            errorEmail.style.display = "none";
        }
        if (Email.indexOf("@") !== -1) {
            errorEmail.style.display = "none";
        }
        if (Coords.textContent === "") {
            errorMap.style.display = "block";
        }
        if (Coords.textContent !== "") {
            errorMap.style.display = "none";
        }
        if (name !== "" && number !== "" && Email.indexOf("@") !== -1 && Coords.textContent !== "")  {
            completed.style.display = "block";
        }
}

//КОД ИЗ ДОКУМЕНТАЦИИ ЯНДЕКС КАРТ НЕМНОГО ПОПРАВИЛ (91 строка) ДЛЯ ВЫВОДА КООРДИНАТ, А НЕ АДРЕСА https://yandex.ru/dev/maps/jsbox/2.1/event_reverse_geocode/
ymaps.ready(init);

function init() {
    var myPlacemark,
        myMap = new ymaps.Map('map', {
            center: [55.555, 37.6],
            zoom: 4,
            controls: ['geolocationControl', 'searchControl']
        });

    // Слушаем клик на карте.
    myMap.events.add('click', function (e) {
        var coords = e.get('coords');

        // Если метка уже создана – просто передвигаем ее.
        if (myPlacemark) {
            myPlacemark.geometry.setCoordinates(coords);
        }
        // Если нет – создаем.
        else {
            myPlacemark = createPlacemark(coords);
            myMap.geoObjects.add(myPlacemark);
            // Слушаем событие окончания перетаскивания на метке.
            myPlacemark.events.add('dragend', function () {
                getAddress(myPlacemark.geometry.getCoordinates());
            });
        }
        getAddress(coords);
    });

    // Создание метки.
    function createPlacemark(coords) {
        return new ymaps.Placemark(coords, {
            iconCaption: 'поиск...'
        }, {
            preset: 'islands#violetDotIconWithCaption',
            draggable: true
        });
    }

    // Определяем адрес по координатам (обратное геокодирование).
    function getAddress(coords) {
        myPlacemark.properties.set('iconCaption', 'поиск...');
        ymaps.geocode(coords).then(function (res) {
            var firstGeoObject = res.geoObjects.get(0);

            myPlacemark.properties
                .set({
                    // Формируем строку с данными об объекте.
                    iconCaption: [
                        // Видоизменил строку для вывода координат, а не адреса!
                        firstGeoObject.geometry.getCoordinates(),
                    ].filter(Boolean).join(', '),
                    // В качестве контента балуна задаем строку с адресом объекта.
                    balloonContent: firstGeoObject
                });
            document.querySelector(".coords").textContent = firstGeoObject.geometry.getCoordinates();
        });
    }
}

body, .mailForm {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

input, textarea {
    font-size: 14px;
    margin: 10px 0 0 0;
    width: 350px;
    resize: none;
}
.mailForm__map {
    margin-top: 10px;
}
button {
    margin: 10px 0 0 0;
    font-size: 14px;
    cursor: pointer;
}

.mailForm__comment {
    display: inline-block;
    height: 200px;
}

.mailForm__error, .mailForm__completed, .coords {
    display: none;
    color: red;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
}

.mailForm__completed {
    color: green;
    font-size: 20px;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet">
    <title>Mail Form</title>
    <script src="https://api-maps.yandex.ru/2.1/?apikey=5200498b-0123-4796-1-bee4ea5473212&lang=ru_RU" type="text/javascript">
    </script>
</head>
<body>
    <div class="mailForm">
        <input class="mailForm__name" placeholder="Имя" type="text" value="">
        <input class="mailForm__number" placeholder="Телефон" type="tel" value="">
        <input class="mailForm__email" placeholder="Email" type="email" value="">
        <div id="map" class="mailForm__map" style="width: 100%; height: 200px">

        </div>
        <textarea class="mailForm__comment" maxlength="500" placeholder="Комментарий" type="text" value=""></textarea>
        <button onclick="viodChecker()">Отправить</button>
        <div class="mailForm__error name-error">Введите имя</div>
        <div class="mailForm__error number-error">Введите телефон</div>
        <div class="mailForm__error email-error">Неверный формат эл. почты</div>
        <div class="mailForm__error map-error">Адрес не указан</div>
        <div class="mailForm__completed">Форма отправлена!</div>
        <div class="coords"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

БЛОГ НА HUSL

Shitcode to code

Ответы (0 шт):