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()


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