проверка формы не работает в ie
Вложений: 1
Я не давно начал изучать javascript написал проверку формы не работает в ie пробовал через DOM2 и через innerHTML не работает. Будет и вторая проверка на стороне сервера . проверка на javascript чтобы данные туда сюда не гонять. Просьба указать на ошибки и как исправить.
<!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="" onsubmit="return checkForm()"> <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="txt3">Отключить проверку формы</label><br/> <input type="submit" value="Передать форму"/> <input type="reset" value="Очистить"/> </fieldset> </form> <script type="text/javascript"> var flag = 1; //переменная придет из заголовка если user-agent ie то flag= 1; if(flag){ var myCheck = document.getElementById("myCheck"); myCheck.defaultChecked = true; myCheck.nextElementSibling.firstChild.nodeValue = 'Проверка формы для версий IE7 и ниже отключена. Будьте внимательны при вводе данных или обновите ваш браузер'; myCheck.nextElementSibling.style.color = '#f00'; } function checkForm(){ var myCheck = document.getElementById("myCheck").checked; if(!myCheck){ myCheck = false; //чекбокс разрешение на проверку даннных var isEmpty = false;// флаг на разрешение отправки формы var myForm = document.getElementById("myForm"); var t = myForm.elements; //поиск импутов for (var i = 0; i < t.length; i++){ if(t[i].type == 'text'&&t[i].type != 'hidden'){ isEmpty = true;// запрет на отправку формы t[i].style.borderColor = '#fc9'; next = t[i].nextElementSibling; next.style.color = '#f00'; if(t[i].value == ''){ next.firstChild.nodeValue = 'Поле не заполнено'; }else{ if( t[i].value.length != t[i].previousElementSibling.value || isNaN(t[i].value) != false ){ next.firstChild.nodeValue = 'В ' + t[i].parentElement.firstElementChild.firstChild.nodeVa lue + ' нужно указать ' + t[i].previousElementSibling.value + ' цифр'; }else{ t[i].style.borderColor = '#999'; next.style.color = '#808080'; next.firstChild.nodeValue = 'OK!'; } } } } } return !isEmpty; } </script> </body> </html> |
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.Вы опубликовали очень много кода. Пожалуйста, локализуйте проблему! Выделите фрагмент кода, по которому есть вопрос и опубликуйте его отдельно. И, по возможности, уберите из кода мусор, чтобы нам легче было сориентироваться и помочь решить вашу проблему. Спасибо. P.S. код форматируют специальные теги [ js ] ... [/js], [ html ] ... [/html] и другие аналогичные, сам. http://javascript.ru/formatting |
Я все же попытаюсь разобраться в этом...
Все дело в том, что свойства:
На самом деле здесь можно обойтись и без скрытых элементов формы, да и кросс-браузерно можно сделать. Можете подсмотреть у меня, как реализован расширяемый валидатор форм Я немного подправил Ваш код с помощью 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>
|
Не думаю что begelme увидит какую-либо разницу )
|
moskitos80,
Большое спасибо за участие! сижу пытаюсь понять преобразования многое непонятно почему весь код в ( ). Ладно буду разбираться во всяком случае в таком виде он более авторитетно выглядит. Еще раз спасибо |
Код обернут в анонимную функию , тут же вызываемую (или как это по-русски называется. В общем immediate function invocation)
(function(){
// этот код тут же выполнится.
})()
Прием используется для создания области видимости переменных. Что-бы все объявленные переменные не стали глобальными. Если конструкция не понятна, то можно ее представить как:
// объявили функцию
function _fn() {
// код
}
// тут же вызвали
_fn()
Но зачем давать имя этой функции если ее можно просто сразу вызвать:
// имя не дадим, оно не нужно
function () {
// код
}() // тут же вызвали, дописав ()
Но такая конструкция не сработает, из-за особенностей синтаксиса JS. Поэтому нужно писать либо
(function(){
})()
либо так:
(function(){
}())
Есть и другие варианты. Цель одна - дать понять парсеру что это не декларация функции а функция-выражение. |
Пожалуйста begelme и удачи в изучении JavaScript :)
|
| Часовой пояс GMT +3, время: 05:02. |