Динамическая валидация формы

 
0
 
JavaScript
ava
Nаtаshа | 21.11.2011, 21:40
Всем дорого вечера!Прошу мне помочь. Вопрос состоит в том, как мне сделать динамическую валдиацию. Т.е. необходимо после того, как пользователь нажал на поле ввода и перешел с него,проверить введенные данные и вывести сообщение сразу же,а не после того, как будет нажата кнопка pressButton. Буду благодарна, если вы покажете мне пример кода.



<html>
<head>
<title>Регистрационная форма</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<div id="header" class="header" align="center">
<p>Зарегистрируйся</p>
</div>

<div id="loginName" class="left" align="right">
Логин:
</div>
<div id="loginMessage" class="right">

</div>
<div id="loginField" class="main">
<input id="login" type="text" class="edit_field" />
</div>

<div id="passTitle" class="left" align="right">
Пароль:
</div>
<div id="passMessage" class="right">
</div>
<div id="passField" class="main">
<input id="pass" type="password" class="edit_field"/>
</div>

<div id="repassTitle" class="left" align="right">
Повторите Пароль:
</div>
<div id="repassMessage" class="right">
</div>
<div id="repassFiled" class="main">
<input id="repass" type="password" class="edit_field" "/>
</div> <br>


......


///тута кнопка по нажатию которой проходит проверка
<div id="snd" class="main" align="center">
<br><input id="pressButton" type="button" value="Продолжить" onClick="pressBut()">
</div>
</body>
</html>





var getLogin, getPass,pressBut ...;

getLogin = function() {
var login, login3, re;
login = document.getElementById("login");
login3 = document.getElementById("loginMessage");
if (login.value.length === 0) {
login3.style.color = "red";
login.style.border = "solid 1px red";
login3.innerHTML = "Введите логин!";
return false;
}
re = new RegExp(/^[a-zA-Z0-9_]+$/);
if (re.test(login.value)) {
login.style.border = "solid 1px black";
login3.innerHTML = "";
return true;
} else {
login3.style.color = "red";
login.style.border = "solid 1px red";
login3.innerHTML = "Неправильный логин!";
return false;
}
};

pressBut = function() {
getLogin();

.....
return true;
};


Заранее спасибо!
Kommentare (3)
ava
magelan | 22.11.2011, 10:24 #
читайте про формы, зачем нужен таг form, зачем у input нужен атрибут name.

обычно проверяют так, я умышленно не стал вам подсвечивать дивы, т.к. это легко сделать, просто показал механику работы с формой.

<script type="tetx/javascript">
var testText = function( s )
{
return s != '';
}
var testPassword( s )
{
return s != '';
}
var onsubm = function( form )
{
var errStr = '';
var inps = form.getElementsByTagName( "INPUT" )

for( var i = 0; i < inps.length; i++ )
with( inps[ i ])

switch( name )
{
case 'pass':
case 'repass':
if( !testPassword( value ))
errStr += 'Incorrect field: ' + getAttribute( 'msg' ) + '\n';
break;
case 'login':
if( !testText( value ))
errStr += 'Incorrect field: ' + getAttribute( 'msg' ) + '\n';
break;
default:
break;
}

if( errStr == '' )
form.submit();
else
alert( errStr );
}
</script>

<form onsubmit="subm( this ); return false">
<input type="text" name="login" msg="Логин">
<input type="password" name="pass" msg="Пароль">
<input type="password" name="repass" msg="Пароль повтор">
<input type="submit" value="Continue">
</form>
ava
Nаtаshа | 22.11.2011, 15:53 #
Через onblur проще! После потери фокуса.

<div id="loginField" class="main">
<input id="login" type="text" class="edit_field" onBlur="getLogin()" />
</div>

Все равно спасибо.
ava
magelan | 23.11.2011, 01:38 #
Onblur может не случится, если из инпута будет нажат энтер.
Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Mitwirkende
advanced
Absenden