Проверка правильности заполения формы "на лету", т.е. без перезагрузки страницы.
ДЕМО
Изменения для стилей-клонов 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;
}
Готово!