В чем ошибка? Почему не происходит переадресация?

Question

[dintear_koden]

Почему-то вместо переадресации на другую страницу, (т.е на thanks.html) появляется значок ? в адресной строке.

index.html

<form class="send-message" onsubmit="return validate_form()">
				<div class="flexbox spcbtn message-content">
					<div class="flex center your-date column">
						<div class="error error-name">
							error
						</div>
						<p class="your"><input type="text" class="fields your-name" placeholder="Как к вам обращаться?" id="yourName"></p>
						<div class="error error-mail">
							error
						</div>
						<p class="your"><input type="email" class="fields your-mail" placeholder="Ваша почта:"></p>
					</div>
					<div class="flex center column your-date-message">
						<div class="error error-message">
							error
						</div>
						<textarea class="your-message" placeholder="Ваше сообщение:"></textarea>
					</div>
				</div>
				<div class="flex center submit-btn">
					<input type="submit" class="submit-message" value = 'отправить'>
				</div>
			</form>

main.js

var form = document.querySelector('.send-message')
var buttonForm = form.querySelector('.submit-message')
var yourName = form.querySelector('.your-name')
var yourMail = form.querySelector('.your-mail')
var yourMessage = form.querySelector('.your-message')
var errorName = form.querySelector('.error-name')
var errorMail = form.querySelector('.error-mail')
var errorMessage = form.querySelector('.error-message')

function validate_form ( ) {
	valid = true;

	// Проверка заполненности поля Ваше имя
	if ( yourName.value == "" ) {
		errorName.classList.add('active')
		valid = false;
	}
	else {
		if (errorName.classList.contains('active')) {
			errorName.classList.remove('active')
		}
	}

	// Проверка заполненности поля Ваша почта
	if ( yourMail.value == "" ) {
		errorMail.classList.add('active')
		valid = false;
	}
	else {
		if (errorMail.classList.contains('active')) {
			errorMail.classList.remove('active')
		}
	}

	// Проверка заполненности поля Ваше собщение
	if ( yourMessage.value == "" ) {
		errorMessage.classList.add('active')
		valid = false;
	}
	else {
		if (errorMessage.classList.contains('active')) {
			errorMessage.classList.remove('active')
		}
	}

	if (valid == true) {
		window.location.href = 'thanks.html'
	}

	return valid;
}

Comments

[Артем Кондрацкий]

У вас значит не проходит валидацию. Вопросительный знак появляется, потому что форма submit'ится, вроде.
Вы валидацию дебажили?

[dintear_koden]

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

[dintear_koden]

Артем Кондрацкий, https://codepen.io/dintear2/pen/RwPgPvB Вот код страницы

Answer 1

[strelok011]

добавьте переопределение submit для вашей формы. По клику на кнопку submit браузер игнорирует js и обрабатывает по стандарту отправку формы.

используйте что-то вроде

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

или

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

Comments

[Александр Черемхин]

По клику на кнопку submit браузер игнорирует js и обрабатывает по стандарту отправку формы.

По клику на кнопку submit браузер выполняет js, а затем обрабатывает по стандарту отправку формы. Так как атрибут name в input не указан, то не отправляется ни одно поле.

[dintear_koden]

Что здесь означает функция someBug()

[dintear_koden]

Александр Черемхин, ну допустим я указал name, и что

[strelok011]

Александр Черемхин, отправка формы аяксом думаете сработает в таком варианте?

dintear_koden, подразумевается любой ваш код. Вначале блокируется обработка стандартного поведения браузера по обработке формы, затем уже ваша произвольная функция. Переход по href, к примеру.

[dintear_koden]

strelok011, блин не знаю, но у меня ничего не получается. Может кто-нибудь мой codepen переделать, как пример?

[strelok011]

dintear_koden, ниже куратор правильно написал.
Вам надо сначала разобраться с формой и отправить данные. Если на сервере что-нибудь типа php - там и разрулить переходы на страницу с благодарностью.
Если данные должны отправиться используя ajax, тогда на JS писать асинхронный запрос на отправку, дожидаться успешного выполнения и только тогда переходить на страницу с благодарностью.

Если же вам просто нужно сделать образец верстки и по клику куда-то перейти - сделайте вместо submit формы обычный a href, который только выглядит как кнопка.

[dintear_koden]

strelok011, мне не требуется отправлять или сохранять куда-то данные, если вы об этом. Мне просто нужно валидацию и переход.

[Александр Черемхин]

dintear_koden, из кода не вполне понятно что вы в итоге хотите? Сейчас это выглядит так
1) пользователь вводит данные
2) валидация данных
3) если успех то переходи на другую страницу и стандартная отправка формы
4) если провал то ничего не происходит

Вы именно этого хотите? В этом мало смысла... или он от меня ускользает )

[Александр Черемхин]

strelok011, я не уверен, но по моему да. Надо проверить). При этом в примере нет Ajax там редирект стоит, но это не важно

[strelok011]

Тогда валидируйте форму не по клику, а по событию, типа onchange для каждого инпута или on blur для формы. А на сабмит не завязывайте ничего. Только превент добавить, чтоб по кнопке enter не улетело.
На валидацию добавить видимость кнопки "Отправить". Пока валидация не прошла - ее не видно.
Типа этого https://stackoverflow.com/questions/38441547/how-d...

Answer 2

[Alex]

Потому что форма отправляется на текущую страницу. Да ещё и ничего не отправляет.
Мой вам совет:
Выбросьте ваш JS. Сделайте то что вы хотите исключительно средствами html. И уже мотом, если очень нужно, можно добавить немножно CSS

Comments

[dintear_koden]

Мне нужно использовать именно js, а с js я мало работал и почти не использовал, а если и использовал то только jquery

[dintear_koden]

Мне нужно сделать так, чтобы переход на другую страницу происходил только после валидации формы, но если я просто сделаю валидацию с помощью html и сделаю переход по onclick, то валидации не будет, а будет сразу переход.

[Alex]

dintear_koden, Вы не правы. При использовании встроенной валидации, браузер не будет отправлять форму если она не заполнена. И JS вам не нужен совсем. Только если есть необходимость это как-то по особенному оформить, там где CSS не хватит