Как заставить работать атрибут required для input в старых версиях IE?

Для любого web-разработчика пока нет более серьезной проблемы, как полная кроссбраузерность его продукта. Наверное, это одна из основных задач хорошего специалиста: добиться того, чтобы его сайт всегда правильно отображался во всех браузерах.

Параметр required, который иногда используется для input, не работает в древних IE, что просто нельзя так оставить. Пользователи-пенсионеры, которые до сих пор пользуются IE6 должны одинаково легко работать с вашим сайтом, наряду с пользователями Google Chrome последней версии. Кто, кроме web-разработчиков, о них может позаботиться.

О наболевшем, о 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 для вашего браузера.

Комментарии:

  1. Сергей опубликовал комментарий 18 Ноябрь 2014, 11:48 #

    Как сделать такую же проверку для поля selected ?
    Спасибо!

    | Ответить
Имя
e-mail
Сайт
Текст комментария: