Почему не работает валидация и всплывающее окно?

Question

Константин @gradk

JavaScript

Почему не работает валидация и всплывающее окно?

На сайте есть 2 формы регистрации (сторонний виджет) в шапке и в подвале.

Формы идентичны, только айдишник формы отличается. Для каждой формы есть класс на котором висит событие - валидация и окно об успешной регистрации.

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

Если вообще не один из классов не вешаю, то игнорирует валидацию и модальное окно, но регистрация проходит.

В чем может быть проблема?

Форма в шапке:

<div class="training__form">
							<form id="ltForm1427169" class="hero-form" action="https://virilisgk.getcourse.ru/pl/lite/block-public/process-html?id=747751498" method="post" data-open-new-window="0"><input type="hidden" name="formParams[setted_offer_id]" >
							<input id="formNameCall" type="text" maxlength="60"  placeholder="* Имя" name="formParams[full_name]" value=""><br>
							<input id="formEmailCall" type="text" maxlength="60"  placeholder="* Email" name="formParams[email]" value="" ><br>
							<input id="formPhoneCall" type="text" maxlength="60"  placeholder="* Номер телефона" name="formParams[phone]" value=""><br>
							<button type="submit"
									id="button6556653" class="button"  onclick="if(window['btnprs5ee8a82e27f98']){return false;}window['btnprs5ee8a82e27f98']=true;setTimeout(function(){window['btnprs5ee8a82e27f98']=false},6000);return true;">
								Записаться</button><br>
							<input type="hidden" id="2159905ee8a82e221a2" name="__gc__internal__form__helper" class="__gc__internal__form__helper" value="">
							<input type="hidden" id="2159905ee8a82e221a2ref" name="__gc__internal__form__helper_ref" class="__gc__internal__form__helper_ref" value="">
							<input type="hidden" name="requestTime" value="1592305710">
							<input type="hidden" name="requestSimpleSign" value="6b442c8f44be7b60dc76ddf42c651c58">
							<input type="hidden" name="isHtmlWidget" value="1"/></form><span id="gccounterImgContainer"></span><script>
								window.onload = function(){
									let loc = document.getElementById("2159905ee8a82e221a2");
									loc.value = window.location.href;
									let ref = document.getElementById("2159905ee8a82e221a2ref");
									ref.value = document.referrer;
								}
							</script>
							<script async defer>
								window.onload = function(){
									let statUrl = "https://virilisgk.getcourse.ru/stat/counter?ref=" + encodeURIComponent(document.referrer)
										+ "&loc=" + encodeURIComponent(document.location.href);
									document.getElementById('gccounterImgContainer').innerHTML
										= "<img width=1 height=1 style='display:none' id='gccounterImg' src='" + statUrl + "'/>";
								}
							</script>
                       </div>

Форма в подвале:

<div class="training__form">
						<form id="ltForm1241541"  action="https://virilisgk.getcourse.ru/pl/lite/block-public/process-html?id=747751498" method="post" data-open-new-window="0"><input type="hidden" name="formParams[setted_offer_id]" >
							<input id="formNameCall" type="text" maxlength="60"  placeholder="* Имя" name="formParams[full_name]" value=""><br>
							<input id="formEmailCall" type="text" maxlength="60"  placeholder="* Email" name="formParams[email]" value="" ><br>
							<input id="formPhoneCall" type="text" maxlength="60"  placeholder="* Номер телефона" name="formParams[phone]" value=""><br>
							<button type="submit"
									id="button6556653" class="button"  onclick="if(window['btnprs5ee8a82e27f98']){return false;}window['btnprs5ee8a82e27f98']=true;setTimeout(function(){window['btnprs5ee8a82e27f98']=false},6000);return true;">
								Записаться</button><br>
							<input type="hidden" id="2159905ee8a82e221a2" name="__gc__internal__form__helper" class="__gc__internal__form__helper" value="">
							<input type="hidden" id="2159905ee8a82e221a2ref" name="__gc__internal__form__helper_ref" class="__gc__internal__form__helper_ref" value="">
							<input type="hidden" name="requestTime" value="1592305710">
							<input type="hidden" name="requestSimpleSign" value="6b442c8f44be7b60dc76ddf42c651c58">
							<input type="hidden" name="isHtmlWidget" value="1"/></form><span id="gccounterImgContainer"></span><script>
								window.onload = function(){
									let loc = document.getElementById("2159905ee8a82e221a2");
									loc.value = window.location.href;
									let ref = document.getElementById("2159905ee8a82e221a2ref");
									ref.value = document.referrer;
								}
							</script>
							<script async defer>
								window.onload = function(){
									let statUrl = "https://virilisgk.getcourse.ru/stat/counter?ref=" + encodeURIComponent(document.referrer)
										+ "&loc=" + encodeURIComponent(document.location.href);
									document.getElementById('gccounterImgContainer').innerHTML
										= "<img width=1 height=1 style='display:none' id='gccounterImg' src='" + statUrl + "'/>";
								}
							</script>
                       </div>

Валидация для обоих классов hero-form и call-form:

$('.modal__close').on('click', function () {
		$(".modal").removeClass('modal--visible');
	});
	function validateForm() {
		$('.hero-form button[type="submit"').click(function(e) {
			e.preventDefault();
			var name = $("#formNameHero");
			var email = $("#formEmailHero");
			var phone = $("#formPhoneHero");
			var nameVal = $("#formNameHero").val();
			var emailVal = $("#formEmailHero").val();
			var phoneVal = $("#formPhoneHero").val();

			if(nameVal.length > 2 && emailVal.length > 5 && phoneVal.length > 5) {
			var $data;
			$data = $(this).parent('form').serialize();
			$(".modal").addClass('modal--visible');
			$.ajax({
			url: 'https://virilisgk.getcourse.ru/pl/lite/block-public/process-html?id=747751498',
			type: 'post',
			data: $data
		});
			}
			if(nameVal.length < 2) {
				name.css({'box-shadow':'inset 0 0 10px red'});
			} else {
				name.css({'box-shadow':'none'});
			}

			if(emailVal.length < 5){
				email.css({'box-shadow':'inset 0 0 10px red'});
			} else {
				email.css({'box-shadow':'none'});
			}

			if(phoneVal.length < 5){
				phone.css({'box-shadow':'inset 0 0 10px red'});
			}else {
				phone.css({'box-shadow':'none'});
			}

		});

		$('.call-form button[type="submit"').click(function(e) {
			e.preventDefault();
			var name = $("#formNameCall");
			var email = $("#formEmailCall");
			var phone = $("#formPhoneCall");
			var nameVal = $("#formNameCall").val();
			var emailVal = $("#formEmailCall").val();
			var phoneVal = $("#formPhoneCall").val();

			if(nameVal.length > 2 && emailVal.length > 5 && phoneVal.length > 5) {
			var $data;
			$data = $(this).parent('form').serialize();
			$(".modal").addClass('modal--visible');
			$.ajax({
			url: 'https://virilisgk.getcourse.ru/pl/lite/block-public/process-html?id=747751498',
			type: 'post',
			data: $data
		});
			}
			if(nameVal.length < 2) {
				name.css({'box-shadow':'inset 0 0 10px red'});
			} else {
				name.css({'box-shadow':'none'});
			}

			if(emailVal.length < 5){
				email.css({'box-shadow':'inset 0 0 10px red'});
			} else {
				email.css({'box-shadow':'none'});
			}

			if(phoneVal.length < 5){
				phone.css({'box-shadow':'inset 0 0 10px red'});
			}else {
				phone.css({'box-shadow':'none'});
			}

		});
	}