Ссылка onclick="location.href" не поддерживает required? Чем заменить required?

@Siurendy · Регистрация: 07.06.2016

Всем привет. Хотел реализовать переход с формы на другую страницу с помощью onclick="location.href", с обязательной проверкой полей формы на заполненность, но как оказалось required тут не работает. Подскажите, чем можно заменить required?
action с submin не вариант, с ними данные из формы не передаются и не происходит переход на страницу.

HTML5

<section id="user-greeting">
    <form>
        <label>
            Имя
            <input type="text" autocomplete="name" name="name" required>
        </label>
        <label>
            Фамилия
            <input type="text" autocomplete="family-name" name="family-name" required>
        </label>
        <button onclick="location.href='https://site.ru/next.html'">Перейти</button>
    </form>
    <section>
        Привет, <span class="name"></span>, добро пожаловать на сайт!
    </section>
</section>

Javascript

(function main() {
        var form = document.querySelector("#user-greeting > form");
        var section = document.querySelector("#user-greeting > section");
        
        function changeView() {
            if ("name" in localStorage) {
                form.style.display = "none";
                section.style.display = "";
                document.querySelector("#user-greeting .name").textContent = localStorage.name;
            } else {
                section.style.display = "none";
                form.style.display = "";
            }
        }
        
        form.addEventListener("submit", function(event) {
            event.preventDefault();
            var data = new FormData(form);
            localStorage.name = [data.get("name"), data.get("family")].join(" ");
            changeView();
        });
        
    
        changeView();
    })();

@amr-now · 08.09.2019, 18:23

Привет!
Непонятно, когда нужно переходить на другой сайт.
Поприветствовать юзверя и через 10 секунд перейти на другой сайт?

Вот пока без перехода:

PHP/HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <section id="user-greeting">
        <form>
            <label>
                Имя
                <input type="text" autocomplete="name" name="name" required>
            </label>
            <label>
                Фамилия
                <input type="text" autocomplete="family-name" name="family-name" required>
            </label>
            <button type="button">Перейти</button>
        </form>
        <section>
            Привет, <span class="name"></span>, добро пожаловать на сайт!
        </section>
    </section>
    <script>
        let form = document.querySelector("#user-greeting>form");
        let section = document.querySelector("#user-greeting>section");
        let name = section.querySelector(".name");
 
        form.querySelector("button").onclick = clickHandler;
 
        changeView();
 
        function clickHandler() {
            let data = new FormData(form);
            localStorage.setItem("name", [data.get("name"), data.get("family-name")].join(" "));
            changeView();
        }
 
        function changeView() {
            let value = localStorage.getItem("name");
            console.log(value);
            if (value) {
                form.style.display = "none";
                section.style.display = "";
                name.textContent = value;
            } else {
                section.style.display = "none";
                form.style.display = "";
            }
        }
    </script>
</body>
</html>

Опции темы