Init
This commit is contained in:
Alan
63
js/baloon/css/baloon.css
Normal file
63
js/baloon/css/baloon.css
Normal file
@@ -0,0 +1,63 @@
|
||||
#baloon {
|
||||
width: 187px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 64999;
|
||||
|
||||
filter: Alpha(Opacity='75');
|
||||
-moz-opacity: 0.75;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#baloonHeader {
|
||||
width: 187px;
|
||||
height: 19px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.baloonHeaderDirect {
|
||||
background-image: url(../i/baloon-header.gif);
|
||||
}
|
||||
|
||||
.baloonHeaderFlip {
|
||||
background-image: url(../i/baloon-header-flip.gif);
|
||||
}
|
||||
|
||||
#baloonFooter {
|
||||
width: 187px;
|
||||
height: 3px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
background-image: url(../i/baloon-footer.gif);
|
||||
background-repeat: no-repeat;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
#baloonBody {
|
||||
padding: 10px;
|
||||
color:#000;
|
||||
background-color: #D0D0D0;
|
||||
|
||||
width: auto;
|
||||
margin: 0;
|
||||
font: normal normal 10px/14px Verdana, Arial, serif;
|
||||
line-height: 140%;
|
||||
background-image: url(../i/baloon-body.gif);
|
||||
background-repeat: repeat-y;
|
||||
|
||||
display: block;
|
||||
}
|
||||
BIN
js/baloon/i/baloon-body.gif
Normal file
BIN
js/baloon/i/baloon-body.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 B |
BIN
js/baloon/i/baloon-footer.gif
Normal file
BIN
js/baloon/i/baloon-footer.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 B |
BIN
js/baloon/i/baloon-header-flip.gif
Normal file
BIN
js/baloon/i/baloon-header-flip.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 194 B |
BIN
js/baloon/i/baloon-header.gif
Normal file
BIN
js/baloon/i/baloon-header.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 195 B |
156
js/baloon/index.html
Normal file
156
js/baloon/index.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Validate JS</TITLE>
|
||||
|
||||
<SCRIPT src="js/default.js" language="JavaScript" type="text/javascript"></SCRIPT>
|
||||
<SCRIPT src="js/validate.js" language="JavaScript" type="text/javascript"></SCRIPT>
|
||||
<SCRIPT src="js/baloon.js" language="JavaScript" type="text/javascript"></SCRIPT>
|
||||
|
||||
<LINK href="css/default.css" rel="stylesheet" type="text/css" />
|
||||
<LINK href="css/baloon.css" rel="stylesheet" type="text/css" />
|
||||
</HEAD>
|
||||
|
||||
<BODY>
|
||||
<TABLE width="100%" border="0" cellpadding="10" cellspacing="0">
|
||||
<FORM action="index.html" method="GET" enctype="multipart/form-data">
|
||||
<TR valign="top">
|
||||
<TD width="50%">
|
||||
Текст сообщения об ошибке будет браться из атрибута <STRONG>notice</STRONG>, если тот есть. Если у формы есть атрибут <STRONG>onsubmit</STRONG>, то стандартный скрипт валидации подцепляться не будет.
|
||||
Допустимые значения текстовых полей (<STRONG>text</STRONG>, <STRONG>password</STRONG> или <STRONG>textarea</STRONG>) определяются атрибутом <STRONG>pattern</STRONG>, значение которого в общем случае
|
||||
представляет из себя регулярное выражение, соотвествующее корректному значению поля. Ограничители писать не надо.
|
||||
Например значение этого поля должно начинаться с 'a', заканчиваться на 'c', и содержать внутри хотя бы один 'b' (<STRONG>^ab+c$</STRONG>).
|
||||
<BR /><BR /> Кстати, в старых Opera’ах (< 7) регулярные выражения вроде бы отсутвуют как класс.
|
||||
</TD>
|
||||
<TD width="50%">
|
||||
<INPUT type="text" name="count" pattern="^aq+c$" notice="skiri"/>
|
||||
</TD>
|
||||
</TR>
|
||||
|
||||
<TR valign="top">
|
||||
<TD>
|
||||
Если атрибут <STRONG>pattern</STRONG> равен number, то в поле ожидается неотрицательное целое число
|
||||
</TD>
|
||||
|
||||
<TD>
|
||||
<INPUT type="text" name="number" pattern="number" notice="В этом поле должно быть целое число"/>
|
||||
</TD>
|
||||
</TR>
|
||||
|
||||
<TR valign="top">
|
||||
<TD>
|
||||
Если атрибут <STRONG>pattern</STRONG> равен url, то в поле ожидается URL. К сожалению, в регулярных выражениях я не очень силен,
|
||||
поэтому шаблон иногда сбоит. Так что перед использованием протестите
|
||||
</TD>
|
||||
|
||||
<TD>
|
||||
<INPUT type="text" name="url" pattern="url" notice="В этом поле должен быть URL"/>
|
||||
</TD>
|
||||
</TR>
|
||||
|
||||
<TR valign="top">
|
||||
<TD>
|
||||
Если атрибут <STRONG>pattern</STRONG> равен string, то поле просто не должно быть пустым
|
||||
</TD>
|
||||
<TD>
|
||||
<INPUT type="text" name="string" pattern="string" notice="В этом поле хоть что-то надо вписать"/>
|
||||
</TD>
|
||||
</TR>
|
||||
|
||||
<TR valign="top">
|
||||
<TD>
|
||||
Если атрибут <STRONG>pattern</STRONG> равен email, то в поле ожидается email адрес
|
||||
</TD>
|
||||
<TD>
|
||||
<INPUT type="text" name="email" pattern="email" notice="В этом поле должен быть email адрес"/>
|
||||
</TD>
|
||||
</TR>
|
||||
|
||||
|
||||
<TR valign="top">
|
||||
<TD>
|
||||
Ошибка возникает при выборе OPTION’а с атрибутом <STRONG>notselected</STRONG>.
|
||||
Элемент с атрибутом <STRONG>select-multiple</STRONG> я еще не придумал как проверять (пока не было еще в этом нужды)
|
||||
</TD>
|
||||
|
||||
<TD>
|
||||
<SELECT name="choise" notice="Надо выбрать 1 элемент, причем не первый">
|
||||
<OPTION value="1" notselected="notselected">Одын</OPTION>
|
||||
<OPTION value="2">Две</OPTION>
|
||||
<OPTION value="3">Три</OPTION>
|
||||
<OPTION value="4">Четыре</OPTION>
|
||||
</SELECT>
|
||||
</TD>
|
||||
</TR>
|
||||
|
||||
<TR valign="top">
|
||||
<TD>
|
||||
У любого из checkbox’ов можно указать атрибуты <STRONG>min</STRONG>, <STRONG>max</STRONG> и
|
||||
<STRONG>notice</STRONG>
|
||||
</TD>
|
||||
|
||||
<TD>
|
||||
<FIELDSET>
|
||||
<LEGEND>Группа checkbox’ов с одинаковым именем</LEGEND>
|
||||
|
||||
<INPUT class="radio" type="checkbox" name="rand" min="1" max="2" notice="Надо выбрать по краней мере 1 элемент, но не больше 2х"/>
|
||||
<INPUT class="radio" type="checkbox" name="rand"/>
|
||||
<INPUT class="radio" type="checkbox" name="rand"/>
|
||||
<INPUT class="radio" type="checkbox" name="rand"/>
|
||||
<INPUT class="radio" type="checkbox" name="rand"/>
|
||||
</FIELDSET>
|
||||
</TD>
|
||||
</TR>
|
||||
|
||||
<TR valign="top">
|
||||
<TD>
|
||||
<STRONG>TEXTAREA</STRONG> проверяется так же, как и <STRONG>INPUT[@type = 'text']</STRONG>
|
||||
</TD>
|
||||
|
||||
<TD>
|
||||
<TEXTAREA name="text" pattern="string" notice="Сюда надо просто что то ввести"></TEXTAREA>
|
||||
</TD>
|
||||
</TR>
|
||||
|
||||
<TR valign="top">
|
||||
<TD>
|
||||
У любого из radiobutton’ов можно указать атрибуты <STRONG>min</STRONG>, <STRONG>max</STRONG> и <STRONG>notice</STRONG>.
|
||||
<BR>Причем, так как это radiobutton, а не checkbox, то <STRONG>min</STRONG> = <STRONG>max</STRONG> = 1
|
||||
</TD>
|
||||
|
||||
<TD>
|
||||
<FIELDSET>
|
||||
<LEGEND>Группа radiobutton’ов с одинаковым именем</LEGEND>
|
||||
|
||||
<INPUT class="radio" type="radio" name="mask"/>
|
||||
<INPUT class="radio" type="radio" name="mask" min="1" max="1" notice="Надо выбрать какой то 1 элемент"/>
|
||||
<INPUT class="radio" type="radio" name="mask"/>
|
||||
<INPUT class="radio" type="radio" name="mask"/>
|
||||
</FIELDSET>
|
||||
</TD>
|
||||
</TR>
|
||||
|
||||
<TR valign="top">
|
||||
<TD>
|
||||
Элемент типа <STRONG>file</STRONG> я не придумал как проверять. Да и проверять его редко когда надо, разве что при закачке картинок.
|
||||
Но в их случае я пользуюсь превьюшками, а имя файла и расширение как правило интереса совсем не представляют
|
||||
</TD>
|
||||
|
||||
<TD>
|
||||
<INPUT type="file" name="photo"/>
|
||||
</TD>
|
||||
</TR>
|
||||
|
||||
<TR valign="top">
|
||||
<TD>
|
||||
Значения полей типа <STRONG>image</STRONG>, <STRONG>button</STRONG>, <STRONG>submit</STRONG>,
|
||||
<STRONG>reset</STRONG> и <STRONG>hidden</STRONG> никак не проверяются
|
||||
</TD>
|
||||
<TD>
|
||||
<INPUT type="submit" value="submit"/>
|
||||
</TD>
|
||||
</TR>
|
||||
</FORM>
|
||||
</TABLE>
|
||||
</BODY>
|
||||
</HTML>
|
||||
228
js/baloon/js/baloon.js
Normal file
228
js/baloon/js/baloon.js
Normal file
@@ -0,0 +1,228 @@
|
||||
// (C) Netlogic, 2003
|
||||
|
||||
function CreateBaloon() {
|
||||
baloon = document.createElement('DIV');
|
||||
baloon.setAttribute('id', 'baloon');
|
||||
|
||||
baloonHeader = document.createElement('DIV');
|
||||
baloonHeader.setAttribute('id', 'baloonHeader');
|
||||
baloonHeader.setAttribute('class', 'direct');
|
||||
|
||||
baloonBody = document.createElement('DIV');
|
||||
baloonBody.setAttribute('id', 'baloonBody');
|
||||
|
||||
baloonFooter = document.createElement('DIV');
|
||||
baloonFooter.setAttribute('id', 'baloonFooter');
|
||||
|
||||
baloonBody.innerText = 'baloon';
|
||||
|
||||
baloon.appendChild(baloonHeader);
|
||||
baloon.appendChild(baloonBody);
|
||||
baloon.appendChild(baloonFooter);
|
||||
|
||||
baloon.onmouseover = function(e) { this.style.filter = "Alpha(Opacity='100')"; this.style.cursor = 'pointer'; this.style.MozOpacity = '1';}
|
||||
baloon.onmouseout = function(e) { this.style.filter = "Alpha(Opacity='75')"; this.style.cursor = 'auto'; this.style.MozOpacity = '0.75'; }
|
||||
baloon.onselectstart = function(e) { return false; }
|
||||
baloon.onclick = function(e) { this.style.display = 'none'; }
|
||||
|
||||
document.body.appendChild(baloon);
|
||||
|
||||
window.onresize = function(e) { document.getElementById('baloon').style.display = 'none'; }
|
||||
}
|
||||
|
||||
function ShowBaloon(i) {
|
||||
baloon = document.getElementById('baloon');
|
||||
|
||||
document.getElementById('baloonBody').innerHTML = i.getAttribute('data-notice') && i.getAttribute('data-notice').length ? i.getAttribute('data-notice') : 'ERROR';
|
||||
baloon.style.display = 'block';
|
||||
|
||||
var xleft=0;
|
||||
var xtop=0;
|
||||
o = i;
|
||||
|
||||
do {
|
||||
xleft += o.offsetLeft;
|
||||
xtop += o.offsetTop;
|
||||
|
||||
} while (o=o.offsetParent);
|
||||
|
||||
xwidth = i.offsetWidth ? i.offsetWidth : i.style.pixelWidth;
|
||||
xheight = i.offsetHeight ? i.offsetHeight : i.style.pixelHeight;
|
||||
|
||||
bwidth = baloon.offsetWidth ? baloon.offsetWidth : baloon.style.pixelWidth;
|
||||
|
||||
w = window;
|
||||
|
||||
xbody = document.compatMode=='CSS1Compat' ? w.document.documentElement : w.document.body;
|
||||
dwidth = xbody.clientWidth ? xbody.clientWidth : w.innerWidth;
|
||||
bwidth = baloon.offsetWidth ? baloon.offsetWidth : baloon.style.pixelWidth;
|
||||
|
||||
flip = !(xwidth - 10 + xleft + bwidth < dwidth);
|
||||
|
||||
baloon.style.top = xheight - 10 + xtop + 'px';
|
||||
baloon.style.left = (xleft + xwidth - (flip ? bwidth : 0) - 25) + 'px';
|
||||
|
||||
document.getElementById('baloonHeader').className = flip ? 'baloonHeaderFlip' : 'baloonHeaderDirect';
|
||||
|
||||
i.focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
// (C) Netlogic, 2003
|
||||
|
||||
function ValidateForms() {
|
||||
for (i = 0; i < document.forms.length; i++) {
|
||||
if(document.forms[i].onsubmit) continue;
|
||||
|
||||
document.forms[i].onsubmit = function(e) {
|
||||
var form = e ? e.target : window.event.srcElement;
|
||||
|
||||
for(var i=0; i<form.elements.length; i++) {
|
||||
var value = form.elements[i].value;
|
||||
|
||||
switch(form.elements[i].type) {
|
||||
case 'text':
|
||||
case 'password':
|
||||
case 'textarea':
|
||||
pattern = form.elements[i].getAttribute('data-format');
|
||||
|
||||
if(pattern) {
|
||||
switch(pattern) {
|
||||
case 'string':
|
||||
if(!value.length) {
|
||||
return ValidateNotice(form.elements[i]);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'number':
|
||||
if(!isNumeric(value)) {
|
||||
return ValidateNotice(form.elements[i]);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'url':
|
||||
if(!isUrl(value)) {
|
||||
return ValidateNotice(form.elements[i]);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'email':
|
||||
if(!isEmail(value)) {
|
||||
return ValidateNotice(form.elements[i]);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
/*if(!isPattern(pattern, value)) {
|
||||
return ValidateNotice(form.elements[i]);
|
||||
}*/
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'radio':
|
||||
case 'checkbox':
|
||||
min = form.elements[i].getAttribute('min') ? form.elements[i].getAttribute('min') : 0;
|
||||
max = form.elements[i].getAttribute('max') ? form.elements[i].getAttribute('max') : document.getElementsByName(form.elements[i].getAttribute('name')).length;
|
||||
|
||||
if(min || max) {
|
||||
var items = document.getElementsByName(form.elements[i].getAttribute('name'));
|
||||
var count = 0;
|
||||
|
||||
for(var l=0; l<items.length; l++){
|
||||
if(items[l].checked) {
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
||||
if(count < min || count > max) {
|
||||
return ValidateNotice(form.elements[i]);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case 'select-one':
|
||||
case 'select-multiple':
|
||||
selected = form.elements[i].options[form.elements[i].selectedIndex];
|
||||
if(selected && selected.getAttribute('notselected')) {
|
||||
return ValidateNotice(form.elements[i]);
|
||||
}
|
||||
break;
|
||||
|
||||
break;
|
||||
|
||||
case 'file':
|
||||
break;
|
||||
|
||||
case 'image':
|
||||
case 'button':
|
||||
case 'submit':
|
||||
case 'reset':
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (typeof eCommerceSubmit == 'function') ? eCommerceSubmit() : true;
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function isUrl(str) {
|
||||
return isPattern("^https?:\\/\\/(?:[a-z0-9_-]{1,32}(?::[a-z0-9_-]{1,32})?@)?(?:(?:[a-z0-9-]{1,128}\\.)+(?:com|net|org|mil|edu|arpa|gov|biz|info|aero|inc|name|[a-z]{2})|(?!0)(?:(?!0[^.]|255)[0-9]{1,3}\\.){3}(?!0|255)[0-9]{1,3})(?:\\/[a-z0-9.,_@%&?+=\\~\\/-]*)?(?:#[^ '\"&<>]*)?$", str.toLowerCase());
|
||||
}
|
||||
|
||||
function isNumeric(str) {
|
||||
return isPattern("^[0-9]+$", str);
|
||||
}
|
||||
|
||||
function isInteger(str) {
|
||||
return isNumeric(str);
|
||||
}
|
||||
|
||||
function isFloat(str) {
|
||||
return isPattern("^[1-9]?[0-9]+(\\.[0-9]+)?$", str);
|
||||
}
|
||||
|
||||
function isEmail(str) {
|
||||
return isPattern("^([a-z0-9_-]+)(\\.[a-z0-9_-]+)*@((([a-z0-9-]+\\.)+(com|net|org|mil|edu|gov|arpa|info|biz|inc|name|[a-z]{2}))|([0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}))$", str.toLowerCase());
|
||||
}
|
||||
|
||||
function isPattern(pattern, str) {
|
||||
if(str.length && pattern.length) {
|
||||
var re = new RegExp(pattern, "g");
|
||||
return re.test(str);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function ValidateNotice(input) {
|
||||
ShowBaloon(input);
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function init_balloon()
|
||||
{
|
||||
return;
|
||||
ValidateForms();
|
||||
CreateBaloon();
|
||||
}
|
||||
|
||||
if (window.attachEvent) {
|
||||
window.attachEvent("onload", init_balloon);
|
||||
} else if (window.addEventListener) {
|
||||
window.addEventListener("DOMContentLoaded", init_balloon, false);
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", init_balloon, false);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user