Как сделать кнопку активной при валидности всех input?

Question

[dima_maketov]

Здравствуйте, для валидации формы использую Jquery Validate, но не могу разобраться с кодом как сделать кнопку активной только в случае если все интупы валидно, чисто мыслительно я понимаю как это сделать.

При корректном заполнении полей им присваивается класс valid, нужно произвести всех input'ов на этот класс и если этот класс имеется удалить disabled с button. Подскажите как это можно сделать) Спасибо!

Хотя хрен его знает, с disabled тоже конечно не очень получается, так как Jquery Validate хорошо выводит сообщение о некоторектном вводе данных в том числе и после того, как на кнопку покликали, а поставив disabled - ничего не происходит. Я ставил один скрипт required_fields(в нэте нашел статью), но после того как начал его использовать началось дублирование сообщений на email, хотя этот скрипт очень неплохо выполнял то что мне нужно. Использую для отправки писем UniMail, а там, как только ты кликаешь на баттон - сразу же отправляется письмо, кроме тех моментов когда стоит required, но функции вывода об некорректном введении данных выполняет Jquery Validate.

Answer 1

[Сергей Горячев]

gnatkovsky.com.ua/poka-polya-ne-zapolneny-knopka-n...

Comments

[dima_maketov]

Сергей, а можно каким-то образом сделать эту кнопку кликабельной, но в тоже время чтобы она не отправляла письмо, если disabled сделать - Jquery Validate не будет выводить ошибки о неправильном вводе, так как кнопка не будет кликабельна. А скрипт отправки сообщения который я использую как-раз отправляет письмо после клика на кнопку. То есть два взаимоисключающих последствия от одного действия: вывод ошибок о неправильности введенных данных и отправка сообщения на почту.
Вот при помощи этого скрипта отправляются данных на email.

$(".popup-form").submit(function() { //Change
		var th = $(this);
		$.ajax({
			type: "POST",
			url: "mail.php", //Change
			data: th.serialize()
		}).done(function() {
			alert("Thank you!");
			$.magnificPopup.close();
			setTimeout(function() {
				// Done Functions
				th.trigger("reset");
			}, 1000);
		});
		return false;
	});

Быть может посмотрите сайт - "5saitov.ru"

[Сергей Горячев]

dima_maketov: Вообще, при правильной настройке jQuery Validate, у вас и не должна кнопка отправлять данные, посмотрите пример на euroservice.aydigital.webirus.ru (кнопка Написать нам).

[dima_maketov]

Sergey Goryachev: мм, да вообще по-моему в данном случае тут сам скрипт отправки сообщения работает не правильно, там задано просто - кликнув по кнопке в форме отправить содержимое на почту. Вот я и думаю, что решение может быть таким - разрешать выполнять это действие только тогда, когда все поля имеют класс valid, я бы сделал сам, да вот в jquery и в программирования я ноль.

[dima_maketov]

Sergey Goryachev: кстати, форму не видно prntscr.com/b7qvjb

[Сергей Горячев]

dima_maketov: баг на хроме, вчера нашёл, не поправил ещё. Посмотрите с мозиллы.

[Сергей Горячев]

dima_maketov: Ща накидаю фиддл быстренько.

[dima_maketov]

Sergey Goryachev: сейчас) Надо скачать ее сначала.
А вот так можно сделать if ( все инпуты формы #cback.hasClass('valid')){
Разрешить отправлять на почту сообщение
} вот так сработает? Кстати, я написал такой кодик:

if ($('.phone').hasClass('valid')) {
	}

Он работает, но только в статическом режиме - не проверяет постоянно есть ли у этого объекта такой класс. Как можно сделать чтобы он проверял постоянно без больших нагрузок?

[Сергей Горячев]

dima_maketov: https://jsfiddle.net/webirus/k80gbgcb/

[Сергей Горячев]

dima_maketov: name и email проверяются по submitHandler, а телефон я ошибся (в коде tel, а в скрипте phone), поэтому он не проверяется.

[dima_maketov]

Sergey Goryachev: спасибо, я так понял, что в submitHandler: function() нужно прописать мой код отправки сообщения?

[Сергей Горячев]

dima_maketov: Ну, да, он проверяет корректно или нет, если корректно - отправляет данные в файл send и выводить сообщение, что отправлено (если вам так нужно). Если нет, возвращает invalid.

[dima_maketov]

Sergey Goryachev: да спасибо, 2-ой день с этой проблемой мучаюсь и так и не додумался что так можно сделать, благодарю)

[dima_maketov]

Sergey Goryachev: все правильно, только почему-то иногда только с двух и более кликов отправляет сообещние

[Сергей Горячев]

dima_maketov: Скорей всего это проблема соединения, если вы на сайте тестируете. У меня при слабом инете такое было. Но форма корректно работает.

[dima_maketov]

Sergey Goryachev: хорошо, спасибо большое)) выручили прям)

[dima_maketov]

Sergey Goryachev: можно еще кое-что спросить?

[Сергей Горячев]

dima_maketov: спросите)

[dima_maketov]

Sergey Goryachev: когда человек заходит на сайт "5saitov.ru" и кликает по якорной ссылке, он переходит к этому блоку и загораживает его заголовок. но если после этого он нажимает на ту же самую ссылку - переходит именно туда, куда надо(заголовок виден), можно ли это както решить?

[dima_maketov]

Sergey Goryachev: человек кликает на "О нас", скролл плывет к нужному блоку и перекрывает "О КОМПАНИИ"

[Сергей Горячев]

dima_maketov: Посмотрел, но даже не знаю. У меня такой скрипт никогда не выдавал такой ошибки...

[dima_maketov]

Sergey Goryachev: я тоже если честно не понимаю как так))

[Сергей Горячев]

dima_maketov: хз, пересмотрел подробно. не понимаю))))

[dima_maketov]

Sergey Goryachev: проблема в фиксированном/нефиксированном меню, у нас ведь есть классы скроллинг и лоадинг, и соотвенно чтобы были видны заголовки я задавал значение только для одного из видов этих скролингов, например, сейчас стоит scrollTop: target.offset().top - 60, 60 - высота фикс блока, а нефиксированное меню нуждается в scrollTop: target.offset().top - 120, у меня даже получилось, но оно становиться адекватным только для нефикс. меню. "5saitov.ru", может быть подскажите как это сделать, а то я по колхозному просто скопировал весь блок текста, хотя чую что там нужно с переменным поиграться

[Сергей Горячев]

dima_maketov: добавьте для #slider такие же классы, loading и scrolling, при .loading { margin: 0; }, а при .scrolling { margin-top: 60px; }. И допишите скрипт $('.head-line, #slider') в двух местах.

[dima_maketov]

Sergey Goryachev: немного не понял)) а зачем слайдеру добавлять теже классы, и как там маргины помогу))

[Сергей Горячев]

dima_maketov: когда прыгает меню из простого в фиксированный, вы теряете 60 пикселей. Вот на эту высоту у вас и прыгает блок заголовка.

[Сергей Горячев]

dima_maketov: фактически получается такая картина - вы кликаете по меню, в этот самый момент скрипт высчитывает, сколько пикселей прокрутить до блока. Но меню скрывается во время скролла и скрипт это не учитывает, пролетая лишние 60 пикселей вниз. А когда вы кликаете второй раз, то скрипт уже правильно расчитывает место, куда нужно скрольнуть. Всё логично.

[dima_maketov]

Sergey Goryachev: ну как я понял нужно при scrolling еще добавить + 60 пикселей слайдеру, чтобы таким образом он прибавил тот пробел который не замечает этот скрипт?

[Сергей Горячев]

dima_maketov: Это всё легко проверяется так - кликаем на О нас, потом на Продукцию. О нас криво, Продукция норм. Вовращаемся в начало страницы. Снова кликаем по Продукция, а потом О нас, в обратном порядке. И видим обратную картину. О нас норм, продукция криво. Значит потерянные 60 пикселей как раз и решают эту проблему.

[Сергей Горячев]

dima_maketov: Я так и написал, добавить 60 пикселей слайдеру.

[dima_maketov]

Sergey Goryachev: я в общем-то это понял) вы можете сейчас на 5сайтов зайти, там теперь наоборот при клике на якорную ссылку переход нормальный, но при нажатии уже на фикс меню получается пляска, правда не понимаю почему) вроде по логике все правильно, а на деле - нет))

[dima_maketov]

Sergey Goryachev: я вот так это сделал:

$('a[href*="#"]:not([href="#"])').not('.popup-with-move-anim').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			if (target.length) {
				$('html, body').animate({
					scrollTop: target.offset().top - 120
				}, 1000);
				return false;
			}
		}
	});

	var heightblock = $('.header').height();
	$(window).scroll(function() {
  	if ($(this).scrollTop() >= heightblock && $('.head-line').hasClass("loading")) {
      	$('.head-line').removeClass("loading").addClass("scrolling");
				$('a[href*="#"]:not([href="#"])').not('.popup-with-move-anim').click(function() {
					if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
						var target = $(this.hash);
						target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
						if (target.length) {
							$('html, body').animate({
								scrollTop: target.offset().top - 60
							}, 1000);
							return false;
						}
					}
				});
  	} else if ($(this).scrollTop() < heightblock && $('.head-line').hasClass("scrolling")) {
      	$('.head-line').removeClass("scrolling").addClass("loading");

  	}
  });

[Сергей Горячев]

dima_maketov: Всё там нормально, кроме первого клика. Решение я уже сказал.

[Сергей Горячев]

dima_maketov: Зачем второй раз $('a[href*="#"]:not([href="#"])') ? Достаточно одного в начале.

[dima_maketov]

Sergey Goryachev: решил так: задал по стандарту .headline.loading - position: absolute, и через jquery top: высота верхнего блока, а так в следующий раз если такая проблем будет я теперь буду смотреть на высоту при помощи html-тега через браузер, нужно было просто сделать так, чтобы фактически html не воспринимал высоту headline. Но понял это благодаря вам, спасибо))))

[dima_maketov]

Sergey Goryachev: теперь бы с двойными кликами по кнопке разобраться)

Answer 2

[Morerion]

Привет!
2 минуты порыскал в google и нашел это
jsfiddle.net/t52ka/2