О наболевшем, о Internet Explorer

Для нормальных браузеров, к которым можно отнести Firefox, Opera и Google Chrome, эта задача относительно легка. Даже давние версии этих браузеров одинаково хорошо отображают html-код, если в нем конечно же не используются какие-то новые технологии. Но чтобы добиться подобного в браузерах семейства Internet Explorer, требуются просто титанические усилия.

Каждая версия браузера Internet Exlorer обладает своей, уникальной тупостью. Что работает в IE6, может как положено не работать в IE7 и наоборот. Этот зоопарк компании Microsoft не удалось побороть даже в самой последней версии своего браузера.

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

Поэтому мне, как web-разработчику, приходится выступать некоторой «прослойкой» между капризными браузерами и требующими знаний и зрелищ посетителями сайтов. И замечательно, что web-разработчикам пока это удается.

Дак, как же заставить работать required в старых версиях IE?

На помощь нам приходит JS. Раньше я терпеть его не мог, а теперь не вижу дальнейшего пути без него на просторе «правильного» WEB.

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

За все у нас будет отвечать функция fnCheckFields(). Поместите на вашем сайте JS-код:

<script type="text/javascript">
function fnCheckFields(form_obj){
    var error_msg = "Пожалуйста, заполните все обязательные поля.";
    var is_error = false;
    for (var i = 0; form_obj_elem = form_obj.elements[i]; i++)
        if (form_obj_elem.type  "input" || form_obj_elem.type  "text")
            if (form_obj_elem.getAttribute("required") && !form_obj_elem.value)
                is_error = true;
    if (is_error) alert(error_msg);
    return !is_error;
}
</script>

Обычно рекомендуют размещать его между html-тегами HEAD в начале страницы, но я бы рекомендовал все же размещать его в самом низу страницы до закрывающегося тега BODY. Таким образом JS меньше влияет на скорость загрузки страницы.

Окно ввода, где должен вводиться обязательный параметр, на html-языке должно выглядеть так:

<form onsubmit="return fnCheckFields(this)">
    <input type="text" name="pole" required="required">
    <input type="submit" value="Отправить">
</form>

Этот скрипт работает очень просто: после нажатия кнопки Отправить, скрипт проверяет все инпуты на наличие параметра required и если находит его, то соответственно смотрит на введенное значение этого поля. Если в такой инпут ничего не введено, то выводится предупреждающее окно о необходимости ввода. Данные соответственно никуда не отправляются.

Замечательно еще и то, что если у Вас нормальный браузер, который уже научился понимать этот параметр как положено, такого предупреждающего окна не всплывет и будут работать стандартные инструменты обработки параметра required для вашего браузера.