Как включить кнопку по результатам валидации, если изначально она выключенна?

Question

[Александр Соболев]

Создал предельно простую форму. 6 инпутов. Каждый на проверке. Кнопка отправки данных формы изначально disabled.
Как включить по результату проверки и правильного заполнения всего?
Как обычно формируется система отсутствия возможных ошибок ?
Что-то вроде
error = -6
if validate_this(value) = true {error = error--;}else{error++;}
while error <0 confirm button disabled.. Вопрос в том - каким методом проверять состояние глобального $error

Или как вообще это делается?

Кодакусок

Swal.mixin({
			confirmButtonText: 'Продолжить',
			showCancelButton: true,
			cancelButtonText: 'Отменить',
			progressSteps: ['I', 'II']
		}).queue([
			
		{
			title: 'Основные данные',
			html:`<div class="form-row">
			<div class="form-group col-6">
		        <label for="client_login">Логин клиента</label>
		        <input type="text" class="form-control" id="client_login" needed="true" value="">
		      </div>
		      <div class="form-group col-md-6">
		        <label for="client_password">Пароль клиента</label>
		        <input type="text" class="form-control" id="client_password" value="" needed="true" placeholder="Пароль не задан..">
		      </div>

		      <div class="form-group col-md-6">
		        <label for="client_name">Фамилия</label>
		        <input type="text" class="form-control" id="client_surename" needed="true" value="">
		      </div>

		      <div class="form-group col-md-6">
		        <label for="client_name">Имя</label>
		        <input type="text" class="form-control" id="client_surename" needed="true" value="">
		      </div>
		      <div class="form-group col-md-6">
		        <label for="new_client_phone">Номер телефона</label>
		        <input type="text" class="form-control" id="new_client_phone" needed="true" value="">
		      </div>
		      <div class="form-group col-md-6" aria-describedby="client_mail_help">
		        <label for="client_mail">E-Mail</label>
		        <input type="text" class="form-control" id="client_mail" needed="true" value="">		       
		      </div>	        
		      <div class="custom-control custom-checkbox">
		      	<input type="checkbox" class="custom-control-input" id="nomail">
		      	<label class="custom-control-label" for="nomail">У клиента нет почты</label>
		      </div>
		    </div>
		    <div class="form-row" id="validation_status"></div>`,

		    onOpen: function(){
		    	swal.disableConfirmButton(); // swal.enableConfirmButton();
				jQuery('#new_client_phone').mask('[phone]');
				jQuery('#nomail').on('click',function(){
					if(jQuery(this).attr("checked") == 'checked') {
						temp_value = jQuery('#client_mail').val();
						var new_client_phone_number = jQuery('#new_client_phone').val();
						jQuery('#client_mail').val(parseInt(new_client_phone_number.replace(/\D+/g,""))+'@site.domen');
						jQuery('#client_mail').attr('disabled','disabled');						
					}
					else{
						jQuery('#client_mail').removeAttr('disabled');jQuery('#client_mail').val(temp_value);
					}
				});
				/* Валидация первого шага формы */

				/* Проверка Логина */
				jQuery('#client_login').on('change',function(){
					var login = jQuery(this).val();
					jQuery.ajax({type:"POST",url:ajaxurl,dataType:'json',data:{action:"new_client_login_exists",login:login},
						success: function(response){
							if(response =='false'){	jQuery('#validation_status').addClass('error').html('Такой Логин уже существует..');}
							else{jQuery('#validation_status').removeClass('error').html('Хороший Логин !').delay(500).empty();}
						},
						error: function() {	swal('Ошибка..','При проверке логина что-то пошло не так. ','error'); }
					});

				});

				/*Проверка E-Mail */
				jQuery('#client_mail').on('change',function(){
					var mail = jQuery(this).val(); var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
					
					if(mail != '' && pattern.test(mail) ){
						jQuery.ajax({type:"POST",url:ajaxurl,dataType:'json',data:{action:"new_client_mail_exists",mail:mail},
							success: function(response){
								if(response =='false'){	jQuery('#validation_status').addClass('error').html('Такой E-Mail уже зарегистрирован..');}
								else{}
							},
							error: function() {	swal('Ошибка..','При проверке E-Mail что-то пошло не так. ','error'); }
						});
					}
			
					if(mail != '') {jQuery('#validation_status').addClass('error').html('Поле не должно быть пустым');}
						
					if( pattern.test(mail) ){ jQuery('#validation_status').removeClass('error').html('Хороший E-Mail !').delay(500).empty();	} 
					else { jQuery('#validation_status').addClass('error').html('Неверный Формат E-Mail !');	}	

				});
			},


		}

Comments

[dicem]

Ставишь проверку прохождения валидации каждого поля на focusOut и если все ок убираешь disabled с сабмита

[Александр Соболев]

А если значения изменяются по несколько раз? Например заполнил 1 инут потом 3, 4 и снова отредактировал 1?

Answer 1

[Олег]

В теле скрипта у вас есть :

jQuery('#validation_status').removeClass('error')
jQuery('#validation_status').addClass('error')

Нужно сыграть на них
После выполнения скрипта можно сделать:

if (jQuery('#validation_status').hasClass('error')!==true){
   //...тут разблокируем вашу кнопку...
   //...как было под комментом в вашем коде...
   swal.enableConfirmButton();
}