Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.08.2013, 21:33
Новичок на форуме
Отправить личное сообщение для begelme Посмотреть профиль Найти все сообщения от begelme
 
Регистрация: 11.08.2013
Сообщений: 2

проверка формы не работает в ie
Я не давно начал изучать 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>
Вложения:
Тип файла: zip Проверка формы.zip (1.6 Кб, 0 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 11.08.2013, 22:08
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.Вы опубликовали очень много кода.

Пожалуйста, локализуйте проблему!

Выделите фрагмент кода, по которому есть вопрос и опубликуйте его отдельно.

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

Спасибо.

P.S. код форматируют специальные теги [ js ] ... [/js], [ html ] ... [/html] и другие аналогичные, сам. http://javascript.ru/formatting
Ответить с цитированием
  #3 (permalink)  
Старый 12.08.2013, 00:40
Интересующийся
Посмотреть профиль Найти все сообщения от moskitos80
 
Регистрация: 11.08.2013
Сообщений: 28

Я все же попытаюсь разобраться в этом...

Все дело в том, что свойства:
  • 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>
Ответить с цитированием
  #4 (permalink)  
Старый 12.08.2013, 08:23
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Не думаю что begelme увидит какую-либо разницу )
Ответить с цитированием
  #5 (permalink)  
Старый 12.08.2013, 19:42
Новичок на форуме
Отправить личное сообщение для begelme Посмотреть профиль Найти все сообщения от begelme
 
Регистрация: 11.08.2013
Сообщений: 2

moskitos80,
Большое спасибо за участие! сижу пытаюсь понять преобразования многое непонятно почему весь код в ( ). Ладно буду разбираться во всяком случае в таком виде он более авторитетно выглядит. Еще раз спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 12.08.2013, 20:28
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Код обернут в анонимную функию , тут же вызываемую (или как это по-русски называется. В общем immediate function invocation)

(function(){
    // этот код тут же выполнится.
})()


Прием используется для создания области видимости переменных. Что-бы все объявленные переменные не стали глобальными.

Если конструкция не понятна, то можно ее представить как:

// объявили функцию
function _fn() {
   // код
}

// тут же вызвали
_fn()


Но зачем давать имя этой функции если ее можно просто сразу вызвать:

// имя не дадим, оно не нужно
function () {
    // код
}() // тут же вызвали, дописав ()


Но такая конструкция не сработает, из-за особенностей синтаксиса JS.

Поэтому нужно писать либо

(function(){

})()


либо так:

(function(){

}())


Есть и другие варианты. Цель одна - дать понять парсеру что это не декларация функции а функция-выражение.
Ответить с цитированием
  #7 (permalink)  
Старый 13.08.2013, 00:00
Интересующийся
Посмотреть профиль Найти все сообщения от moskitos80
 
Регистрация: 11.08.2013
Сообщений: 28

Пожалуйста begelme и удачи в изучении JavaScript
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фоновая проверка данных формы перед отправкой egreek AJAX и COMET 6 20.07.2013 10:17
Дождаться отклика события, или проверка формы перед отправкой vid Общие вопросы Javascript 3 09.07.2013 20:36
Проверка заполнения элементов формы Olegans Элементы интерфейса 0 07.04.2013 20:11
Проверка формы Jango Общие вопросы Javascript 1 22.10.2012 08:08
Не работает remote проверка в jquery validate MaratCrash jQuery 3 12.03.2011 04:54