VPF::Динамическая валидация формы - Форум программистов

Nаtаshа

Дата 21.11.2011, 20:40 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 9.10.2011

Репутация: нет
Всего: нет

Всем дорого вечера!Прошу мне помочь. Вопрос состоит в том, как мне сделать динамическую валдиацию. Т.е. необходимо после того, как пользователь нажал на поле ввода и перешел с него,проверить введенные данные и вывести сообщение сразу же,а не после того, как будет нажата кнопка 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;
  };

Заранее спасибо!

magelan

Дата 22.11.2011, 10:24 (ссылка)

(нет голосов)

Загрузка ...

потерял xPath

Профиль
Группа: Участник
Сообщений: 393
Регистрация: 5.4.2010

Репутация: 3
Всего: 16

читайте про формы, зачем нужен таг 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>

Это сообщение отредактировал(а) magelan - 22.11.2011, 10:25

Nаtаshа

Дата 22.11.2011, 15:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 9.10.2011

Репутация: нет
Всего: нет

Через onblur проще! После потери фокуса.

Код


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

Все равно спасибо.

Это сообщение отредактировал(а) Nаtаshа - 22.11.2011, 15:54

magelan

Дата 23.11.2011, 01:38 (ссылка)

(нет голосов)

Загрузка ...

потерял xPath

Профиль
Группа: Участник
Сообщений: 393
Регистрация: 5.4.2010

Репутация: 3
Всего: 16

Onblur может не случится, если из инпута будет нажат энтер.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »