Я все же попытаюсь разобраться в этом...
Все дело в том, что свойства:
- childElementCount,
- firstElementChild,
- lastElementChild,
- nextElementSibling,
- previousElementSibling
- будут работать в современных браузерах, включая IE9+
На самом деле здесь можно обойтись и без скрытых элементов формы, да и кросс-браузерно можно сделать. Можете подсмотреть у меня, как реализован расширяемый
валидатор форм
Я немного подправил
Ваш код с помощью JSLint и здравого смысла
, что впрочем не заставит его работать кросс-браузерно :
<!doctype html>
<html>
<head>
<title>Проверка формы перед отправкой</title>
<meta charset="utf-8">
<style type="text/css">
html{font:13px/16px Arial,sans-serif;}
div{padding:5px 5px;}
form div input {border-style:solid; border-color:#999;}
fieldset {width:500px;}
span {color:#808080;}
</style>
</head>
<body>
<h1>Проверка формы перед отправкой</h1>
<form id="myForm" action="">
<fieldset>
<legend>Форма</legend>
<div>
<label for="txt1">поле 1</label>
<input type="hidden" value="1"/>
<input type="text" name="p1" />
<span>1 цифра</span>
</div>
<div>
<label for="txt2">поле 2</label>
<input type="hidden" value="2"/>
<input type="text" name="p2" />
<span>2 цифры</span>
</div>
<div>
<label for="txt3">поле 3</label>
<input type="hidden" value="3"/>
<input type="text" name="p3" />
<span>3 цифры</span>
</div>
<div>
<label for="txt4">поле 4</label>
<input type="hidden" value="4"/>
<input type="text" name="p4" />
<span>4 цифры</span>
</div>
<div>
<label for="txt5">поле 5</label>
<input type="hidden" value="5"/>
<input type="text" name="p5" />
<span>5 цифр</span>
</div>
<input type="checkbox" id="myCheck"/>
<label for="myCheck">Отключить проверку формы</label>
<div id="disableCheckForm"></div>
<br />
<input type="submit" value="Передать форму"/>
<input type="reset" value="Очистить"/>
</fieldset>
</form>
<script type="text/javascript">
(function (G) {
var flag = 1, //переменная придет из заголовка если user-agent ie то flag= 1;
myForm = G.document.getElementById("myForm"),
myCheck = myForm.myCheck,
noticeDiv = G.document.getElementById("disableCheckForm"),
checkForm = function () {
var i,
len,
next,
isValid = true,// флаг на разрешение отправки формы
elements = myForm.elements,
current;
if (false === myCheck.checked) {
for (i = 0, len = elements.length; i < len; i += 1) {
current = elements[i];
if ("text" === current.type) {
next = current.nextElementSibling;
current.style.borderColor = "#fc9";
next.style.color = "#f00";
if (0 === current.value.length) {
next.firstChild.nodeValue = "Поле не заполнено";
isValid = false;
} else if (current.value.length !== parseInt(current.previousElementSibling.value, 10) || false !== isNaN(current.value)) {
next.firstChild.nodeValue = "В " +
current.parentElement.firstElementChild.firstChild.nodeValue +
" нужно указать " + current.previousElementSibling.value + " цифр";
isValid = false;
} else {
current.style.borderColor = "#999";
next.style.color = "#808080";
next.firstChild.nodeValue = "OK!";
}
}
}
}
return isValid;
};
if (1 === flag) {
myCheck.checked = true;
noticeDiv.innerHTML = "Проверка формы для версий IE7 и ниже отключена. " +
"Будьте внимательны при вводе данных или обновите ваш браузер";
noticeDiv.style.color = "#f00";
}
myForm.onsubmit = function () {
return checkForm();
};
}(this));
</script>
</body>
</html>