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

Всем привет. Хотел реализовать переход с формы на другую страницу с помощью 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();
	})();

Для этого есть атрибут 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();
	})();

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

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

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

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

<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;  //удалить запомненное
    });
});

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

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>

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

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

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

Opera 63.0.3368.71

Это да, иначе внутренняя проверка работать не будет.

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

Lefseq, я ответил на ваш вопрос...

Тогда страница с формой выглядит так...

<section id="user-greeting">
	<form action="next.html">
		<label>
			Имя
			<input autocomplete="name" name="name" required>
		</label>
		<label>
			Фамилия
			<input autocomplete="family-name" name="familyName" required>
		</label>
		<button>Запомнить</button>
	</form>
</section>
<script>
	(function main() {
		var form = document.querySelector("#user-greeting > form");
		
		form.addEventListener("submit", function(event) {
			event.preventDefault();
			var data = new FormData(form);
			localStorage.name = JSON.stringify(Object.fromEntries(data));
			form.submit();
		});
	})();
</script>

Т. е. форму по любому нужно отправить, только перед отправкой надо сохранить данные формы в локальном хранилище. Адрес на который нужно перейти, указывается в атрибуте action. На странице next.html вы можете работать со значениями из локального хранилища.

Тогда страница next.html может выглядеть так...

<h3>Привет, <span data-field="name"></span>, добро пожаловать на сайт!
</h3>
<p>Привет, <span data-field="name"></span> <span data-field="familyName"></span>. Мы вас ждали.</p>
<p>Как видите, <span data-field="name"></span>, страница называет вас
  по имени. Ваше имя (<i data-field="name"></i>) и фамилия (<i data-field="familyName"></i>)
  были сохранены в локальном хранилище, поэтому теперь их можно было использовать.
  </p>
  
  <button onclick="delete localStorage.name; location.reload();">Забыть меня</button>
  
<script>
	document.addEventListener("DOMContentLoaded", function() {
    if("name" in localStorage === false) return location.replace("./");
    const data = JSON.parse(localStorage.name || "{}");
    
    for(const [key, value] of Object.entries(data)) {
      for(const node of document.querySelectorAll(`[data-field="${key}"]`)) {
        node.textContent = value;
      }
    }
	});
</script>

В <span data-field="name"></span> подставляется значение из отправленной формы. Значению data-field соответствует имя поля из формы.

Рабочий пример на основе этого кода вы можете посмотреть тут... https://charm-launch.glitch.me/localstorage

А зачем вам атрибут required без формы? Оно так не работает!

Почему вы решили, что данные формы нужны только для того, чтобы их отправить обрабатывать в текстовый препроцессор PHP?

Форма нужна для проверки. Форма нужна для связности, чтобы пользователь мог по порядку заполнить поля без необходимости поиска следующего поля. Это громадное улучшение UX.

Всё уже стандартизировано, никаких костылей изобретать не нужно. (атрибут pattern)

Мир не ограничен Windows

Вот в Опере

Я ничего не решил, я просто вижу полную дурь, это как если бы я утром ради выпить чашку кофе обязательно бы отправлялся в ресторан вместо того, чтобы приготовить ее дома.

Я знаю вы любитель мусолить, но это ваше мнение и мне оно пофигу, я лишь высказываю свое.

Спасибо большое за помощь, теперь все работает.

laimas,
Успокойтесь, Malleys хоть поделился действительно рабочим решением, без упоминания дурь мое ТЗ или не дурь.

Я спокоен как танк, мне пофигу что у вас там будет, как говорится "хозяин барин". ;) Но, вся эта хрень (не в плане кода, а как результат вашей хотелки) вам написанная с успехом скушает и ввод одних пробелов полях, и даже не заикнется об ошибках. А вот логика во втором варианте "действий" (#13) уже какая-то есть, в отличие от ахинеи первого.