Здравствуйте, друзья!
Помогите разобраться, никак не получается объединить несколько конструкций проверки полей формы в одну.
В данный момент все три конструкции работают, но в разнобой...
Уважая ваше время, все конструкции
перенёс на jsfiddle.net и подробно прокомментировал.
Продублирую сюда код
HTML - код:
<form class="form-register" id="k_qst_20" action="" method="post">
<!-- ПОЛЕ ЛОГИНА -->
<p> </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> </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> </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 = ' <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
Ну вот и всё вроде. Понимаю что кружу вокруг да около, но сам не могу реализовать. Не хватает знаний, а время на изучения совсем нет. Спасибо вам заранее!
