Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.01.2015, 10:04
Аватар для golopogos
Интересующийся
Отправить личное сообщение для golopogos Посмотреть профиль Найти все сообщения от golopogos
 
Регистрация: 19.05.2014
Сообщений: 24

Объединить три конструкции проверки полей в одну
Здравствуйте, друзья!
Помогите разобраться, никак не получается объединить несколько конструкций проверки полей формы в одну.
В данный момент все три конструкции работают, но в разнобой...

Уважая ваше время, все конструкции перенёс на jsfiddle.net и подробно прокомментировал.

Продублирую сюда код

HTML - код:

<form class="form-register" id="k_qst_20" action="" method="post">

  <!-- ПОЛЕ ЛОГИНА -->
  <p>&nbsp;</p>
  <div class="form-title">ваш логин <span id="val-log"></span><span id="inval-log"></span><span id="username_result"></span></div>
  <input class="form-field login" type="text" id="k_input_field_20_1470" value="">

  <!-- ПОЛЕ ЯЩИКА -->
  <p>&nbsp;</p>
  <div class="form-title">ваш e-mail <span id="val-email"></span><span id="inval-email"></span><span id="email_result"></span></div>
  <input class="form-field email" type="text" id="k_input_field_20_442" value="">

  <!-- ЧЕКБОКС СОГЛАШЕНИЯ --> 
  <input type="checkbox" name="checkme" id="agree" />
  <label for="agree" class="inline">Согласен с условиями</label>
  <p>&nbsp;</p>

   <!-- КНОПКА Зарегистрировать --> 
  <input class="submit-button" type="button" id="k_savebutton20" value="ЗАРЕГИСТРИРОВАТЬ" />

      <form />


jQuery - код:

//// КОНСТРУКЦИЯ №1 - Проверка логина и ящика по маскам, с выводом результата
//----------------------------------------------------------------------------
    $('.login').blur(function() {
        if($(this).val() != '') {
            var pattern = /^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$/i;
            if(pattern.test($(this).val())){
                $(this).css({'border' : '2px solid #569b44'});
				$('#inval-log').text('');
                $('#val-log').text(' корректен').fadeIn(400);
				setTimeout(function(){
                  $('#val-log').fadeOut(400);
                },2000);
            } else {
                $(this).css({'border' : '2px solid #ff0000'});
				$('#val-log').text('');
                $('#inval-log').text(' не корректен').fadeIn(400);
				setTimeout(function(){
                  $('#inval-log').fadeOut(400);
                },2000);
            }
        } else {
            $(this).css({'border' : '2px solid #ff0000'});
			$('#val-log').text('');
        }
    });

    $('.email').blur(function() {
        if($(this).val() != '') {
            var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
            if(pattern.test($(this).val())){
                $(this).css({'border' : '2px solid #569b44'});
				$('#inval-email').text('');
                $('#val-email').text(' корректен').fadeIn(400);
				setTimeout(function(){
                  $('#val-email').fadeOut(400);
                },2000);
            } else {
                $(this).css({'border' : '2px solid #ff0000'});
				$('#val-email').text('');
                $('#inval-email').text(' не корректен').fadeIn(400);
				setTimeout(function(){
                  $('#inval-email').fadeOut(400);
                },2000);
            }
        } else {
            $(this).css({'border' : '2px solid #ff0000'});
			$('#val-email').text('');
        }
    });

////  КОНСТРУКЦИЯ №2 - Проверяем, занят ли логин или ящик и выводим результат в форму
//------------------------------------------------------------------------------------

        //минимальное количество символов для ввода в поле логин
		var min_chars1 = 3;
		//минимальное количество символов для ввода в поле логин
		var min_chars2 = 6;

		//вывод результатов
		var characters_error1 = ' не < 3 символов';
		var characters_error2 = ' не < 6 символов';

        //вывод индикатора ожидания
		var checking_html = '&nbsp;<img src="//bhindi.com//skin/frontend/default/mt_colinus/images/loading.gif" />';

		//при смене фокуса выполнить действие
		$('#k_input_field_20_1470').blur(function(){
			//запуск проверки количества введённых символов
			if($('#k_input_field_20_1470').val().length < min_chars1){
				//если ниже назначенного, то вывести текст ошибки
				$('#username_result').css({'color' : '#ff0000'}).html(characters_error1).fadeIn(400);
                setTimeout(function(){
                  $('#username_result').fadeOut(400);
                },2000);
			}else{			
				//в противном случае запустить проверку
				$('#username_result').html(checking_html).fadeIn(400);
				check_availability1();
			}
		});

		//при смене фокуса выполнить действие
		$('#k_input_field_20_442').blur(function(){
			//запуск проверки количества введённых символов
			if($('#k_input_field_20_442').val().length < min_chars2){
				//если ниже назначенного, то вывести текст ошибки
				$('#email_result').css({'color' : '#ff0000'}).html(characters_error2).fadeIn(400);
				setTimeout(function(){
                  $('#email_result').fadeOut(400);
                },2000);
			}else{			
				//в противном случае запустить проверку
				$('#email_result').html(checking_html).fadeIn(400);
				check_availability2();
			}
		});

//функция проверки логина	
function check_availability1(){

		//назначаем переменную
		var username = $('#k_input_field_20_1470').val();

		//испольуя ajax передаём логин для проверки
		$.post('check_username.php', { username: username },
			function(result){
				//если результат 1
				if(result == 1){
					//показываем, что имя пользователя доступно
					$('#username_result').css({'color' : '#569b44'}).html(' свободен').fadeIn(400);
					$('.submit-button').prop('disabled', false);
					setTimeout(function(){
                        $('#username_result').fadeOut(400);
                    },2000);
					
				}else{
					//показываем, что имя пользователя не доступно
					$('#username_result').css({'color' : '#ff0000'}).html(' занят').fadeIn(400);
					$('.submit-button').prop('disabled', true);
					setTimeout(function(){
                        $('#username_result').fadeOut(400);
                    },2000);
				}
		});
}

//функция проверки ящика
function check_availability2(){

		//назначаем переменную
		var email = $('#k_input_field_20_442').val();

		//испольуя ajax передаём логин для проверки
		$.post('check_email.php', { email: email },
			function(result){
				//если результат
				if(result == 1){
					//показываем, что ящик доступен
					$('#email_result').css({'color' : '#569b44'}).html(' свободен').fadeIn(400);
					$('.submit-button').prop('disabled', false);
					setTimeout(function(){
                        $('#email_result').fadeOut(400);
                    },2000);
				}else{
					//показываем, что ящик не доступен
					$('#email_result').css({'color' : '#ff0000'}).html(' занят').fadeIn(400);
					$('.submit-button').prop('disabled', true);
					setTimeout(function(){
                        $('#email_result').fadeOut(400);
                    },2000);
				}
		});
}

////  КОНСТРУКЦИЯ №3 - Проверяем, отмечен ли чекбокс и управляем активностью кнопки Зарегистрировать
//--------------------------------------------------------------------------------------------------
    $('#k_savebutton20').prop('disabled', true);
          $('#agree').change(function() {
              $('#k_savebutton20').prop('disabled', function(i, val) {
                    return !val;
          })
    });


CSS:

/* Проверка логина и e-mail */
.form-title #val-log, .form-title #val-email {
   margin-bottom: 5px;
   font-size: 16px;
   color: #569b44;
   font-weight: normal;
   text-shadow: #ebebeb 0 1px 0;
}
.form-title #inval-log, .form-title #inval-email {
   margin-bottom: 5px;
   font-size: 16px;
   color: #ff0000;
   font-weight: normal;
   text-shadow: #ebebeb 0 1px 0;
}

#username_result, #email_result{
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: normal;
    text-shadow: #ebebeb 0 1px 0;
}


Необходимо добиться:

1. После проверки по маске поле должно проверяться на наличие уникальности значения с выводом сообщения над полем формы. Сейчас же сообщение проверки по маске и проверки уникальности выводятся одновременно, а нужно чтоб по условиям - если проверена правильность ввода по маске, переходим к проверке значения на уникальность, затем когда проверены все поля, проверяем отмечен ли чекбокс

2. Включить в эту проверку блокировку кнопки Зарегистрировать через изменение класса .submit-button

Ну вот и всё вроде. Понимаю что кружу вокруг да около, но сам не могу реализовать. Не хватает знаний, а время на изучения совсем нет. Спасибо вам заранее!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает скрипт проверки полей bbmm Общие вопросы Javascript 2 06.08.2014 00:57
Функция для перевода размера из байтов в понятный для человека формат Антон Крамолов Ваши сайты и скрипты 4 05.04.2013 16:42
Объединить несколько выборок в одну float jQuery 4 12.07.2011 21:31