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

[Lefseq]

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

<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>

(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();
		});
		
		document.getElementById("user-greeting-forget-button").addEventListener("click", function() {
			delete localStorage.name;
			changeView();
		});
		
		changeView();
	})();

[laimas]

Хотел реализовать переход с формы на другую страницу с помощью onclick="location.href"

Для этого есть атрибут action и событие submit у формы.

[Lefseq]

Для этого есть атрибут action и событие submit у формы.

Да, но в таком случае не передаются данные из формы.

(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();
		});
		
		document.getElementById("user-greeting-forget-button").addEventListener("click", function() {
			delete localStorage.name;
			changeView();
		});
		
		changeView();
	})();

[laimas]

в таком случае не запоминаются данные из формы

С чего вдруг? Зачем вам вообще форма, если вы ее не используете?

[Lefseq]

С чего вдруг? Зачем вам вообще форма, если вы ее не используете?

Почему же не использую?
Рассказываю, посетитель пишет в форме свои Имя и Фамилию, эти данные запоминаются в localStorage, посетитель нажимает на кнопку "Перейти". Его перенаправляет на другую страницу где выводятся данные из localStorage. Все работает. Но проблема в том, что использую данный код, не работает required и пользователь может отправить пустые данные. Вот я и спрашиваю, чем проверять поля используя данный код?

[laimas]

Почему же не использую?

Потому, что в вашем коде серверу ваша форма нафиг не нужна, не отправляете ее вы. Следовательно вам нужны только два поля и две кнопки без формы. На эти кнопки нужно повесить обработчик события, в котором для кнопки запоминания и перенаправления нужно проверять ввод и если ОК, то перенаправить, а для кнопки удаления очищать локальное хранилище. Можете и два отдельных обработчика, это уже как душе угодно.

Для этого достаточно:

<section id="user-greeting">
        <label>
            Имя
            <input type="text" autocomplete="name" required>
        </label>
        <label>
            Фамилия
            <input type="text" autocomplete="family" required>
        </label>
        <button name="mem">Запомнить</button>
    <section>
        Привет, <span class="name"></span> <span class="family"></span>, добро пожаловать на сайт!
        <button name="del">Забудь обо мне!</button>
    </section>
</section>

и суть обработчика:

document.querySelectorAll("button").forEach((b) => {
    b.addEventListener("click", (b) => {
        if(b.target.name=='mem') {
            var err = false, mem = [];
            document.querySelectorAll("#user-greeting [required]").forEach(function(f) {
                if(!f.value.trim()) {
                    //поле не заполнено, вывод ошибки и запрет перенаправления err = true
                } else mem.push(f.value); //запомнить ввод
            });
            if(!err) { //поля заполнены
                localStorage.name = mem.join(' '); //запомнить ввод в хранилище
                location.href = URL; //перенаправление на URL
            }
        } else delete localStorage.name;  //удалить запомненное
    });
});

А вот проверка полей, тут можно издеваться до бессовестного.

[Lefseq]

laimas, Не работает ваш код, совсем. Поля не проверяет, данные не запоминает.

[laimas]

Это ваш не работает, а это будет работать

<html>
<body>
<section id="user-greeting">
        <label>
            Имя
            <input type="text" autocomplete="name" required>
        </label>
        <label>
            Фамилия
            <input type="text" autocomplete="family" required>
        </label>
        <button name="mem">Запомнить</button>
    <section>
        Привет, <span class="name"></span> <span class="family"></span>, добро пожаловать на сайт!
        <button name="del">Забудь обо мне!</button>
    </section>
</section>

<script>
document.querySelectorAll("button").forEach((b) => {
    b.addEventListener("click", (b) => {
        if(b.target.name=='set') {
            var err = false, mem = [];
            document.querySelectorAll("#user-greeting [required]").forEach(function(f) {
                if(!f.value.trim()) {
                    err = true;
                    alert('Не заполнено!');
                } else mem.push(f.value); //запомнить ввод
            });
            if(!err) { //поля заполнены
                alert('Запомнить '+mem.join(' '))
            }
        } else delete localStorage.name;  //удалить запомненное
    });
})
</script>
</body>
</html>

Что-то в песочнице не работает, но запустите это отдельной страницей, и будут сообщения если поля будут пусты или содержать одни пробелы. А уж по каким правилам проверять, это уже не мне решать, тем более, что по логике все это похоже на бред.

[Lefseq]

Что-то в песочнице не работает, но запустите это отдельной страницей

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

[laimas]

И на отдельной странице не работает. Кнопки вообще ни на что не реагируют.

У вас что эксклюзивный браузер? Под каким проверяете?