Пока форма не заполнена отправка не возможна?

Question

[Gor321]

Здравствуйте! Помогите, не получается настроить форму, не силен в js.
Мне нужно, что бы форма отправлялась только при заполненном поле, после отправки мой pop up с формой должен заменяться другим pop up ом с текстом благодарности.
Где у меня ошибка, или как лучше сделать?

<form class="catalog-pop">
	<div class="catalog-pop__in">
		<div class="back"></div>
		<h3><span>Подтвердите заказ:</span></h3>
		<p>Укажите контактные данные, чтобы менеджер подтвердил закази заполнил данные для доставки.</p>
		<div class="form-in">
			<input class="telephon" type="text" name="Телефон" placeholder="+7 ">
		</div>
		<button type="submit" class="btn-stock">Подтвердить заказ</button>
	</div>
	<div class="thanks-pop">
		<div class="back"></div>
		<div>
			<h3><span>Спасибо за доверие.</span><br>Вы не ошиблись с выбором.</h3>
			<p>Менеджер скоро свяжется с вами.</p>
		</div>
	</div>
</form>

..........................

$(' .btn-stock').click( function(){
	var phone = $('.telephon').val();
	if(phone.length != 0) {
		$('.catalog-pop__in').css('display', 'none');
		$('.thanks-pop').css('display', 'flex');
	}
});

Answer 1

[Максим Тимофеев]

не селен в js

1. Удалите пробел:
$(' .btn-stock')
2. При клике на кнопку с type="submit" идет отправка формы, надо отменить стандартное действие, что бы что-то произошло.

$('.btn-stock').click( function(e){
e.preventDefault();

или же отправить форму ajax-ом и по успешному ответу сервера, что-то выводить

Answer 2

[ThunderCat]

нативный required нынче не модно?

Comments

[hckn]

Ну вообще-то да) Я например убираю всю родную валидацию и тд, ибо она убогая

[ThunderCat]

hckn, никто не мешает вам использовать жс для валидации required полей, однако это не отменяет плюшек валидации браузером. Ну и на вкус и цвет... По мне она вполне вписывается в общий дизайн браузера, другое дело что меганавороченные плюшки в стиле МакОс с ней не шикарно смотрятся. Как уже сказал - одно другому не мешает.

[hckn]

ThunderCat, собственно, попап окна нативные не тоько на маке уродливо смотрятся. Вообще зависит от задачи.