Contact Form 7 — Как показать кнопку «Отправить», только после успешного заполнения полей ввода?

Question

[Сергей Dydaevskiy]

Здравствуйте друзья, имеется следующая задача. Необходимо отобразить кнопку "Отправить" только при наличии верно введенных данных в поля ввода. Если у кого была подобного рода задача, прошу отписаться. Пока безуспешно мучаю jQuery.

Comments

[zorca]

Задача не имеет решения. Без нажатия на кнопку отправить мы не сможем валидировать поля формы. То есть нужно конкретно так переписать плагин, чтобы он такое научился делать: отправлять данные на сервер через Ajax нужно при вводе каждого символа в поле. Мягкий вариант - валидировать js-ом, но опять нужно хорошенько дописать штатный скрипт, продумав и написав валидацию.

[Сергей Dydaevskiy]

Ковыряю код целый день. Объясните мне кто нибудь почему вот в этом коде:

jQuery( document ).ready(function( $ ) {   
$('input#bim-button').css('display','none');
var InputName ='';
var InputEmail ='';
var InputTextArea ='';
var InputesValueTrue ='';
$(document).ready(function() {
			//<!-- Real-time Validation -->
				//<!--Name can't be blank-->
				$('input#bim-name').on('input', function() {
					var input=$(this);
					var is_name=input.val();
					InputName=is_name
					//if(is_name){input.removeClass("invalid").addClass("valid");}
					//else{input.removeClass("valid").addClass("invalid");}
					if(is_name){input.css('background-color','aquamarine');
InputName = 1;}
					else{input.css('background-color','red').addClass("invalid");}
				});
				
				//<!--Email must be an email -->
				$('input#bim-email').on('input', function() {
					var input=$(this);
					var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
					var is_email=re.test(input.val());
					InputEmail = is_email;
					if(is_email){input.css('background-color','aquamarine');
InputEmail = 1;}
					else{input.css('background-color','red').addClass("invalid");}
				});
				
				
				//<!--Message can't be blank -->
				$('textarea#bim-message').keyup(function(event) {
					var input=$(this);
					var message=$(this).val();
					console.log(message);
					InputTextArea = message;
					if(message){input.css('background-color','aquamarine');
InputTextArea = 1;}
					else{input.css('background-color','red').addClass("invalid");}
});

alert(InputName);
				//<!--reCapcha -->
var YesButton = InputName + InputEmail + InputTextArea;
//alert(InputName);
if (YesButton == Number("3")){

//alert('No');
//turn false;
$('input#bim-button').css('display','block');
} else {

//return false;
};


			//<!-- After Form Submitted Validation-->
			$("input#bim-button").click(function(event){
				var form_data=$("#contact").serializeArray();
				var error_free=true;
				for (var input in form_data){
					var element=$("#contact_"+form_data[input]['name']);
					var valid=element.hasClass("valid");
					var error_element=$("span", element.parent());
					if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;}
					else{error_element.removeClass("error_show").addClass("error");}
				}
				if (!error_free){
					event.preventDefault(); 
return false;
				}
				else{
					alert('No errors: Form will be submitted');
					return false;
				}
			});
			
			
			
		});
 });

Значение переменной InputName не передается дальше функции:

$('input#bim-name').on('input', function() {
					var input=$(this);
					var is_name=input.val();
					InputName=is_name
					//if(is_name){input.removeClass("invalid").addClass("valid");}
					//else{input.removeClass("valid").addClass("invalid");}
					if(is_name){input.css('background-color','aquamarine');
InputName = 1;}
					else{input.css('background-color','red').addClass("invalid");}
				});

[Mike]

Сергей Dydaevskiy, https://habrahabr.ru/post/78991/