Показать сообщение отдельно
  #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>
Ответить с цитированием