Информация

"4admins.ru" Рекомендует

Проверка валидации ведённых данных

Графическое оформление, Шаблоны (html), темы (css), логотипы, картинки, смайлики и другое.
  • Автор 
    Сообщение
Сообщения: 2
Зарегистрирован: 31 мар 2010, 14:44
Благодарил (а): 0
Поблагодарили: 3 раз в 1 сообщении
Пол: Мужской
Адрес форума: http://all-best.pro
Баллы репутации: 1

Проверка валидации ведённых данных

Сообщение Добавлено: 17 май 2010, 17:28

Проверка формы "на лету" + Установка простой проверки надежности пароля

Проверка правильности заполения формы "на лету", т.е. без перезагрузки страницы.

ДЕМО

Изменения для стилей-клонов SUBSILVER2

открываем шаблон
ucp_register.html

Подключаем необходимые библиотеки: (добавляем в самый вверх шаблона)
Код: Выделить всё
<script type="text/javascript" src="http://ваш_домен/jquery.js"></script>
<script type="text/javascript" src="http://ваш_домен/jquery.validationPassword.js"></script>
<script type="text/javascript" src="http://ваш_домен/jquery.validationEngine.js"></script>

Далее находим:
Код: Выделить всё
   <td class="row2"><input class="post" type="text" name="username" size="25" value="{USERNAME}" /></td>

Заменяем на:
Код: Выделить всё
   <td class="row2"><input class="validate[required,custom[noSpecialCaracters],length[0,20]]" type="text" name="username" size="25" value="{USERNAME}" /></td>

Находим:
Код: Выделить всё
   <td class="row2"><input class="post" type="text" name="email" size="25" maxlength="100" value="{EMAIL}" /></td>

Заменяем на:
Код: Выделить всё
   <td class="row2"><input class="validate[required,custom[email]]" id="email" type="text" name="email" size="25" maxlength="100" value="{EMAIL}" /></td>

Находим:
Код: Выделить всё
   <td class="row2"><input class="post" type="text" name="email_confirm" size="25" maxlength="100" value="{EMAIL_CONFIRM}" /></td>

Заменяем на:
Код: Выделить всё
   <td class="row2"><input class="validate[required,confirm[email]]" type="text" name="email_confirm" size="25" maxlength="100" value="{EMAIL_CONFIRM}" /></td>

Находим:
Код: Выделить всё
   <td class="row2"><input class="post" type="password" name="new_password" size="25" value="{PASSWORD}" /></td>

Заменяем на:
Код: Выделить всё
   <td class="row2"><input id="password" class="validate[required,length[6,30]] text-input" type="password" name="new_password" size="25" value="{PASSWORD}" /></td>

Находим:
Код: Выделить всё
   <td class="row2"><input class="post" type="password" name="password_confirm" size="25" value="{PASSWORD_CONFIRM}" /></td>

Заменяем на:
Код: Выделить всё
   <td class="row2"><input class="validate[required,confirm[password]] text-input" type="password" name="password_confirm" size="25" value="{PASSWORD_CONFIRM}" /></td>

В CSS стиля добавляем:
Код: Выделить всё
   .formError {
         position:absolute;
         top:300px; left:300px;
         width:150px;
         padding-bottom:15px;
         display:block;
         z-index:5000;
      }
         .formError .formErrorContent {
            width:100%;
            background:#000;
            color:#fff;
            font-family:tahoma;
            font-size:10px;
            box-shadow: 1px 1px 6px #000;
            -moz-box-shadow: 1px 1px 6px #000;
            -webkit-box-shadow: 1px 1px 6px #000;
            padding:4px 10px 4px 10px;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
         }
         .formError .formErrorArrow{
            position:absolute;
            bottom:0;left:20px;
            width:15px; height:15px;
            
         }
            .formError .formErrorArrow div{
               box-shadow: 1px 4px 5px #000;
               -moz-box-shadow: 1px 4px 5px #000;
               -webkit-box-shadow: 1px 1px 5px #000;
               font-size:0px;
               
            }
            .formError .formErrorArrow .line10{width:15px;height:1px; background:#000;margin:0 auto; font-size:0px; display:block;}
            .formError .formErrorArrow .line9{width:13px;height:1px; background:#000;margin:0 auto;display:block;}
            .formError .formErrorArrow .line8{width:11px;height:1px; background:#000;margin:0 auto;display:block;}
            .formError .formErrorArrow .line7{width:9px;height:1px; background:#000;margin:0 auto;display:block;}
            .formError .formErrorArrow .line6{width:7px;height:1px; background:#000;margin:0 auto;display:block;}
            .formError .formErrorArrow .line5{width:5px;height:1px; background:#000;margin:0 auto;display:block;}
            .formError .formErrorArrow .line4{width:3px;height:1px; background:#000;margin:0 auto;display:block;}
            .formError .formErrorArrow .line3{width:1px;height:1px; background:#000;margin:0 auto;display:block;}


Если мы хотим чтобы у нас показывало уровень сложности пароля, нам следует найти строчку которую мы изменили:
Код: Выделить всё
   <td class="row2"><input id="password" class="validate[required,length[6,30]] text-input" type="password" name="new_password" size="25" value="{PASSWORD}" /></td>

И перед </td> добавить:
Код: Выделить всё
<div id="complexity"></div>

Так же в CSS стиля нам необходимо добавить:
Код: Выделить всё
#complexity, #results{
width: 270px;
padding: 3px 0;
height: 18px;
color: #000;
font-size: 13px;
text-align: center;
}

#results{
margin: 30px 0 20px 0;
}
.default{background-color: #CCC;}
.weak{background-color: #FF5353;}
.strong{background-color: #FAD054;}
.stronger{background-color: #93C9F4; }
.strongest{background-color: #B6FF6C;}

span.value{
font-weight:bold;
float: rightright;

}

Готово!
Вложения
Source.zip
Проверка валидации ведённых данных
(23.56 Кб) Скачиваний: 146

За это сообщение пользователя Vitaliy21 поблагодарили:
banzaika, GoDFaTHeR, nar200

Аватара пользователя
Сообщения: 1567
Зарегистрирован: 14 ноя 2009, 04:00
Откуда: Пойдём покажу...
Благодарил (а): 195
Поблагодарили: 507 раз в 407 сообщениях
Город: Местный
Пол: Мужской
Адрес форума: http://1ua.2ua.in.ua/
Баллы репутации: 61

Re: Проверка валидации ведённых данных

Сообщение Добавлено: 17 май 2010, 21:58

Vitaliy21 писал(а):Проверка формы "на лету"
Какой формулы, где, на каком "лету"...?
Тут по человечески говорят?
Ни одного объяснения нет.
Что это?
Графический контент для вашего форума!
Изображение

Аватара пользователя
Сообщения: 7010
Зарегистрирован: 11 авг 2009, 16:58
Благодарил (а): 655
Поблагодарили: 2335 раз в 1735 сообщениях
Город: Москва
Пол: Мужской
Адрес форума: http://help.4admins.ru
Баллы репутации: 165

Re: Проверка валидации ведённых данных

Сообщение Добавлено: 17 май 2010, 22:07

Shans
Vitaliy21 писал(а):Проверка правильности заполения формы "на лету", т.е. без перезагрузки страницы.

ДЕМО

Попробуй начать регистрацию, и если ты сделал ошибки ( указал не правильный е-мейл или пароли не совпадают) то форма начнет ругаться на это
На этом сервисе можно cоздать форум бесплатно

Аватара пользователя
Сообщения: 1567
Зарегистрирован: 14 ноя 2009, 04:00
Откуда: Пойдём покажу...
Благодарил (а): 195
Поблагодарили: 507 раз в 407 сообщениях
Город: Местный
Пол: Мужской
Адрес форума: http://1ua.2ua.in.ua/
Баллы репутации: 61

Re: Проверка валидации ведённых данных

Сообщение Добавлено: 18 май 2010, 00:41

Замечательно, всех благодарю!
Как теперь шрифт уменьшить? 8)
Графический контент для вашего форума!
Изображение

Аватара пользователя
Сообщения: 7010
Зарегистрирован: 11 авг 2009, 16:58
Благодарил (а): 655
Поблагодарили: 2335 раз в 1735 сообщениях
Город: Москва
Пол: Мужской
Адрес форума: http://help.4admins.ru
Баллы репутации: 165

Re: Проверка валидации ведённых данных

Сообщение Добавлено: 18 май 2010, 00:54

Shans писал(а):Как теперь шрифт уменьшить? 8)

проблем не вижу, шрифт стандартный у тебя

В теме стиля удали .genmed {
font-size:1.1em;
margin:1px
На этом сервисе можно cоздать форум бесплатно

Аватара пользователя
Сообщения: 1567
Зарегистрирован: 14 ноя 2009, 04:00
Откуда: Пойдём покажу...
Благодарил (а): 195
Поблагодарили: 507 раз в 407 сообщениях
Город: Местный
Пол: Мужской
Адрес форума: http://1ua.2ua.in.ua/
Баллы репутации: 61

Re: Проверка валидации ведённых данных

Сообщение Добавлено: 18 май 2010, 01:06

Что еще удалить?
Размер шрифта не изменился.
Кеш чистил.
[imgshow]http://img8.imageshack.us/img8/6540/36395796.png[/imgshow]
Графический контент для вашего форума!
Изображение

Аватара пользователя
Сообщения: 7010
Зарегистрирован: 11 авг 2009, 16:58
Благодарил (а): 655
Поблагодарили: 2335 раз в 1735 сообщениях
Город: Москва
Пол: Мужской
Адрес форума: http://help.4admins.ru
Баллы репутации: 165

Re: Проверка валидации ведённых данных

Сообщение Добавлено: 18 май 2010, 01:19

Shans
в шаблоне overaL_header удали ЭТО
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

Главный цсс подтягивает размер шрифта из дополнительных
так как кнопки увеличить уменьшить шрифт у тебя уже нет то и эти цсс не нужны
На этом сервисе можно cоздать форум бесплатно

Аватара пользователя
Сообщения: 1567
Зарегистрирован: 14 ноя 2009, 04:00
Откуда: Пойдём покажу...
Благодарил (а): 195
Поблагодарили: 507 раз в 407 сообщениях
Город: Местный
Пол: Мужской
Адрес форума: http://1ua.2ua.in.ua/
Баллы репутации: 61

Re: Проверка валидации ведённых данных

Сообщение Добавлено: 18 май 2010, 01:34

Ну спасибо! Вообще форум потерял! :(

Автор не может молчать 7 минут 30 секунд и добавляет ...

Ладно, вернул к жизни форум.
Включил мозги, но работают не на полную, бо шрифт не уменьшается.

Автор не может молчать 8 минут 25 секунд и добавляет ...

Vitaliy21
Рассказывай, что ты делал, чтоб мод работал правильно?
Графический контент для вашего форума!
Изображение

Аватара пользователя
Сообщения: 7010
Зарегистрирован: 11 авг 2009, 16:58
Благодарил (а): 655
Поблагодарили: 2335 раз в 1735 сообщениях
Город: Москва
Пол: Мужской
Адрес форума: http://help.4admins.ru
Баллы репутации: 165

Re: Проверка валидации ведённых данных

Сообщение Добавлено: 18 май 2010, 01:56

Shans писал(а):бо шрифт не уменьшается.

причем если вообще весь стиль грохнуть то все равно откудато берется размер 16 начиная с куска datebar
На этом сервисе можно cоздать форум бесплатно

Аватара пользователя
Сообщения: 1567
Зарегистрирован: 14 ноя 2009, 04:00
Откуда: Пойдём покажу...
Благодарил (а): 195
Поблагодарили: 507 раз в 407 сообщениях
Город: Местный
Пол: Мужской
Адрес форума: http://1ua.2ua.in.ua/
Баллы репутации: 61

Re: Проверка валидации ведённых данных

Сообщение Добавлено: 18 май 2010, 01:59

Это намек?

Автор не может молчать 13 минут 27 секунд и добавляет ...

Вспомнился мне мультик на ютубе "No money no honey".
Там Виннипух говорит: "thank you god, thank you rabbit, fuck you pig!"
Вот тоже самое произнес и я, когда понял, что 3 скрипта не надо тулить в самый верх шаблона ucp_register.html
Ставить их надо строчкой ниже:
<!-- INCLUDE overall_header.html -->
Подкорректируйте, а!
Надеюсь это был последний сюрприз.
Графический контент для вашего форума!
Изображение


Вернуться в Оформление Форума

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1