Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Обработчик формы (https://javascript.ru/forum/misc/64033-obrabotchik-formy.html)

upiter77 16.07.2016 08:56

Обработчик формы
 
здравствуйте, есть обработчик формы
$(document).ready(function(){
	var pattern = /^[а-яА-Яa-zA-ZёЁ ]{3,15}$/i;
	var name = $('#name');
	
	name.blur(function(){
		if(name.val() != '' && name.val() !='Имя'){
				if(name.val().search(pattern) == 0){
					$('#valid1').html('&nbsp;&nbsp;&nbsp;<img src="http://modus-crimea.ru/images/galochka.gif" />');
					//$('#submit').attr('disabled', false);
					name.removeClass('error').addClass('ok');
				
				}else{ 
					$('#valid1').text('');
					$('#submit').attr('disabled', true);
					name.addClass('error');
				}
			}else{
				$('#valid1').text('');
				name.addClass('error');
				$('#submit').attr('disabled', true);
			}
	})
});






$(document).ready(function(){
	var pattern = /^[a-z.0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
	var email = $('#email');
	
	email.blur(function(){
		if(email.val() != ''){
				if(email.val().search(pattern) == 0 && email.val() !='Email'){
					$('#valid').html('&nbsp;&nbsp;&nbsp;<img src="http://modus-crimea.ru/images/galochka1.gif" />');
					//$('#submit').attr('disabled', false);
					email.removeClass('error').addClass('ok');
					
				}else{
					$('#valid').text('');
					$('#submit').attr('disabled', true);
					email.addClass('error');
				}
			}else{
				$('#valid').text('');
				email.addClass('error');
				$('#submit').attr('disabled', true);
			}
	});
});






$(document).ready(function(){
	var pattern = /^[а-яА-Я,.0-9! ]{3,60}$/i;
	var subject = $('#subject');
	
	subject.blur(function(){
		if(subject.val() != '' && subject.val() !='Тема сообщения'){
				if(subject.val().search(pattern) == 0){
					$('#valid2').html('&nbsp;&nbsp;&nbsp;<img src="http://modus-crimea.ru/images/galochka2.gif" />');
					//$('#submit').attr('disabled', false);
					subject.removeClass('error').addClass('ok');
					
				}else{
					$('#valid2').text('');
					$('#submit').attr('disabled', true);
					subject.addClass('error');
				}
			}else{
				$('#valid2').text('');
				subject.addClass('error');
				$('#submit').attr('disabled', true);
			}
	});
});

$(document).ready(function(){
	var pattern = /^[а-яА-ЯЁё,.0-9!a-zA-Z-!""'@:;+=#№%&* \n\r]{3,600}$/i;
	var message = $('#message');
	
	message.blur(function(){
		if(message.val() != '' && message.val() !='Текст сообщения'){
				if(message.val().search(pattern) == 0){
					$('#valid3').html('&nbsp;&nbsp;&nbsp;<img style="vertical-align:80px" src="http://modus-crimea.ru/images/galochka3.gif" />');
					//$('#submit').attr('disabled', false);
					message.removeClass('error').addClass('ok');
					
					
					
					
				}else{
					$('#valid3').text('');
					$('#submit').attr('disabled', true);
					message.addClass('error');
					
				}
			}else{
				$('#valid3').text('');
				
				message.addClass('error');
				$('#submit').attr('disabled', true);
			}
	});
});

в каждой функции закомментировано включение кнопки submit
подскажите как сделать чтоб кнопка активировалась только тогда когда все поля будут заполнены правильно?

upiter77 16.07.2016 10:38

пытался сделать так
$(document).ready(function(){
    if($('#name').hasClass("ok") && $('#email').hasClass("ok") &&  $('#subject').hasClass("ok") && $('#message').hasClass("ok"))
    {
	$('#submit').attr('disabled', false);
	 } 

	
 
 });

не работает

Spass 16.07.2016 11:31

Попробуй $('#submit').prop('disabled', false);

armidoll 16.07.2016 11:33

Вариант подхода к валидации форм:
http://www.w3schools.com/js/js_validation.asp

upiter77 16.07.2016 11:43

Попробуй $('#submit').prop('disabled', false);


так тоже не работает(

upiter77 16.07.2016 12:03

Цитата:

Сообщение от armidoll (Сообщение 422200)
Вариант подхода к валидации форм:
http://www.w3schools.com/js/js_validation.asp


мне бы с этим разобраться..

armidoll 16.07.2016 12:31

Вариант:

1. Создать функцию высшего порядка validateForm ( принимает отдельные функции-валидаторы в качестве аргументов )

где параметр vaidatorList это массив функций-валидаторов [ fn1, fn2, ..., fnN ]
validateForm = function ( validatorList ) {
    ... 
}

которая возвращает false, если хоть один из валидаторов вернул false

2. Создавать необходимые валидаторы и передавать в качестве аргументов:
validateForm( [ fn1, fn2, ..., fnN] );

3. Создать функцию-обработчик события для onsubmit, скажем:
onSubmitForm = function () {
  return validateForm( [ fn1, fn2, ... , fnN ] );
}

upiter77 16.07.2016 13:38

Цитата:

Сообщение от armidoll (Сообщение 422210)
Вариант:

1. Создать функцию высшего порядка validateForm ( принимает отдельные функции-валидаторы в качестве аргументов )

где параметр vaidatorList это массив функций-валидаторов [ fn1, fn2, ..., fnN ]
validateForm = function ( validatorList ) {
    ... 
}

которая возвращает false, если хоть один из валидаторов вернул false

2. Создавать необходимые валидаторы и передавать в качестве аргументов:
validateForm( [ fn1, fn2, ..., fnN] );

3. Создать функцию-обработчик события для onsubmit, скажем:
onSubmitForm = function () {
  return validateForm( [ fn1, fn2, ... , fnN ] );
}

блин.. сложно сильно для меня

laimas 16.07.2016 14:13

galochka.gif, galochka1.gif, galochka2.gif, ... - они что настолько различны, что одной картинкой не обойтись? )

armidoll 16.07.2016 14:20

Костыли ( не видя html ):
if ( $( '#name' ).hasClass( "ok" )
     && $( '#email' ).hasClass( "ok" )
     && $( '#subject' ).hasClass( "ok" )
     && $( '#message' ).hasClass( "ok" ) )
  {
    $( '#submit' ).attr( 'disabled', false );
  }

добавить в конец ВСЕХ анонимных коллбэков .blur()

upiter77 16.07.2016 14:28

Цитата:

Сообщение от laimas (Сообщение 422219)
galochka.gif, galochka1.gif, galochka2.gif, ... - они что настолько различны, что одной картинкой не обойтись? )


они одинаковые но когда прописываешь одну картинку на второй анимация не воспроизводится(
:blink:

laimas 16.07.2016 14:45

Вся проверка у вас заключена в шаблоне рег. выражения, а современные браузеры давно уже поддерживают атрибут pattern полей формы. Если введенное значение не соответствует шаблону pattern, то форму браузер не отправит. То есть проверку посредством JS можно выполнять только для старых браузеров. И при этом достаточно всего одной функции, в которой будет создавать new RegExp по значению pattern, а идентификатором поля сообщения об ошибке может служить например имя поля, как свойство объекта хранящего такие сообщения.

upiter77 16.07.2016 18:41

Цитата:

Сообщение от laimas (Сообщение 422219)
galochka.gif, galochka1.gif, galochka2.gif, ... - они что настолько различны, что одной картинкой не обойтись? )

Цитата:

Сообщение от armidoll (Сообщение 422221)
Костыли ( не видя html ):
if ( $( '#name' ).hasClass( "ok" )
     && $( '#email' ).hasClass( "ok" )
     && $( '#subject' ).hasClass( "ok" )
     && $( '#message' ).hasClass( "ok" ) )
  {
    $( '#submit' ).attr( 'disabled', false );
  }

добавить в конец ВСЕХ анонимных коллбэков .blur()

СПАСИБО:dance: РАБОТАЕТ!!!:thanks:

armidoll 16.07.2016 20:50

;)


Часовой пояс GMT +3, время: 21:32.