Сообщений в теме: 7

[scofield]

Мне бы очень хотелось бы написать валидацию именно самому, а не взятую из интренета , так как хочу побольше разобратся в jQ.
jQ изучал по видео уроках.

Собственно проблема:
1) Проверка логина:

$('.reg_form #inptext:first').bind('keydown',verifLog); // привязал обработчик

//Сама функция
function verifLog() {
	var data = $('.reg_form #inptext:first').val(); 
	if(data != '' | data.lenght > 2) {
		$('#logginValid').attr('value','loggintrue');
		$('.reg_form #inptext:first').css('border','1px solid #77FF70');
	} else {
		$('#logginValid').attr('value','logginfalse');
		$('.reg_form #inptext:first').css('border','1px solid red');
	}
	}

Проблема: Если ввести больше 2х символов, то это значить что вы ввели правильно, но когда я ввожу больше 2х символов, а потом стираю (Backspace) до 1го символа, то идет "правильная" подсветка. Что не так в коде ? На видео показан процесс


2) Проверка e-mail

$('.reg_form #inptext:eq(1)').bind('keydown',verifEmail);

function verifEmail() {
	var data = $('.reg_form #inptext:eq(1)').val();
	var test_email = data.match(/^\w+([.\+\-]\w+)*@\w+([.\-]\w+)+$/); // делаем подстановку 
	if(test_email) {
		$('#logginValid').attr('value','emailtrue');
		$('.reg_form #inptext:eq(1)').css('border','1px solid #77FF70');
	} else {
		$('#logginValid').attr('value','emailfalse');
		$('.reg_form #inptext:eq(1)').css('border','1px solid red');
	}	
	}

Проблема: проблема в том что если выбирать имейл из списка или copy/past имейл, то код "показывет", что имейл не правильный !


I часть проблема описана Помогите !!!

[scofield]

Денис вы где ???????????????

[Артём Еремеевский]

1) keydown просто на change замените. И что за #inptext:first? "#" - это указатель на "id", он должен быть уникальным (по крайней мере в хорошем коде). Либо обращайтесь через класс тогда, либо делайте каждому элементу отделный ID.

//.reg_form лишний, т.к. по ID в любом случае быстрее найдется и он должен быть уникальным
//Функцию не стоит выность отдельно если они используется только один раз
//Ну и стандартные обработчики типа keydown, keypress, click, mouseover и т.п. можно привязывать напрямую, для них в jQuery уже есть быстрые функции
$('#inptext').change(function(){
        var data = $(this).val(); //This - это как раз "#inptext:first" сейчас
        if(data.lenght > 2) { //Не понял зачем здесь была битовая операция |, тогда уж надо было data != '' && data.lenght > 2
                $('#logginValid').attr('value','loggintrue');
                $(this).css('border','1px solid #77FF70');
        } else {
                $('#logginValid').attr('value','logginfalse');
                $(this).css('border','1px solid red');
        }
});

2) Аналогично, все. Меняйте на change. keydown ловит конкретно нажатие печатной клавиши, в случае с backspace или Ctrl+V - это не так. Change ловит любое изменение поля.

З.Ы. Ну и коли вы валидаторами и jQuery занимаетесь - посмотрите библиотеку jquery.Tools, в частности как там валидация реализована: http://flowplayer.or...ator/index.html

Сообщение отредактировал madFobos: 13 Февраль 2011 - 17:41

[scofield]

Спасибо, я уже сам почти решил задачу

[scofield]

А если я так сделал:

$(document).ready(function () {	
	$('.reg_form #inptext:first').click(verifLog);
	$('.reg_form #inptext:first').keyup(verifLog);
	$('.reg_form #inptext:first').change(verifLog);
	$('.reg_form #inptext:eq(1)').click(verifEmail);
	$('.reg_form #inptext:eq(1)').keyup(verifEmail);
	$('.reg_form #inptext:eq(1)').change(verifEmail);
	$('.reg_form #inptext:eq(2)').click(verifPass);
	$('.reg_form #inptext:eq(2)').keyup(verifPass);
	$('.reg_form #inptext:eq(2)').change(verifPass);
});

function verifLog() {
		var data = $(this).val();
		var datalen = data.length;
		if(data != '' & data.length > 1) {
			$('#logginValid').attr('value','loggintrue');
			$(this).css('border','1px solid #77FF70');
		} else {
			$('#logginValid').attr('value','logginfalse');
			$(this).css('border','1px solid red');	
		}
		
	}
	
	function verifEmail() {
		var data = $(this).val();
		var test_email = data.match(/^\w+([.\+\-]\w+)*@\w+([.\-]\w+)+$/); // делаем подстановку 
		if(test_email) {
			$('#emailValid').attr('value','emailtrue');
			$(this).css('border','1px solid #77FF70');
		} else {
			$('#emailValid').attr('value','emailfalse');
			$(this).css('border','1px solid red');
		}	
	}
	
	function verifPass() {
		var data = $(this).val(); 
		if(data.length > 5) {
			$('#passwordValid').attr('value','passwordtrue');
			$(this).css('border','1px solid #77FF70');
		} else {
			$('#passwordValid').attr('value','passwordfalse');
			$(this).css('border','1px solid red');		
		}
	}

[scofield]

А как сделать проверку на занятость логина на jQ ?

[scofield]

Сделал:

var loggi = $('.reg_form #inptext:first').val();
$.ajax({
	url : "/phpSite/verif_loggin.php",
	type : 'POST',
	data :  {login : loggi},
	success : function(data) {
		if(data==1)
		{
            	$('#free').hide(1);
		$('#notfree').fadeIn(500);
		} else {
		$('#notfree').hide(1);
		$('#free').fadeIn(500);				
		}					
		},
	});

[Артём Еремеевский]

$(document).ready(function () { 
        $('.reg_form #inptext:first').click(verifLog);
        $('.reg_form #inptext:first').keyup(verifLog);
        $('.reg_form #inptext:first').change(verifLog);
        $('.reg_form #inptext:eq(1)').click(verifEmail);
        $('.reg_form #inptext:eq(1)').keyup(verifEmail);
        $('.reg_form #inptext:eq(1)').change(verifEmail);
        $('.reg_form #inptext:eq(2)').click(verifPass);
        $('.reg_form #inptext:eq(2)').keyup(verifPass);
        $('.reg_form #inptext:eq(2)').change(verifPass);
});

Зачем три события обрабатывать? У вас если AJAX валидация будет (как в случае с проверкой занятости логина), то и три запроса на сервер будет отправляться при каждом нажатии клавиши. Я понимаю что вам хочется отловить прямо все изменения поля, но для этого события change будет более чем достаточно.