webshim и checkValidity() в IE8

Исходя из Вручную вызывать проверку формы HTML5, я теперь попытался использовать webshims для обеспечения проверки формы как HTML5 в более старых версиях IE.

Пока работает проверка формы (ошибки отображаются для обязательных полей), функция на <form onsubmit="return verify(this);" > не помешает быть вызванным. Я не уверен, разумно ли ожидать, чтобы это произошло.

Во-вторых, и, как отступление, я добавил проверку в функцию verify(), чтобы продолжить, только если форма верна. Для этого я добавил следующий код в функцию verify() ().

function verify(theForm) {
    form = theForm;

    if (!form.checkValidity()) {
        return false;
    }

    /* continue with recaptcha processing */
}

Я использую IE8 в IETester, потому что у меня нет реальной версии IE8 для тестирования. Это отладка Javascript, похоже, предполагает, что checkValidity() не существует в форме. Я думаю, что есть разумное предположение, что checkValidity должен существовать для формы, так как это цель веб-сайтов.

Мой код инициализации в заголовке HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/branding/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="/branding/js-webshim/minified/polyfiller.js"></script>
<script>
    $.webshims.polyfill('forms');
</script>

Что довольно близко к документированному способу его реализации. И веб-сайты, кажется, работают частично, потому что отображаются сообщения об ошибках пропущенных обязательных полей.

Я добавил демонстрацию того, что происходит на http://jsfiddle.net/BqW9D/2/, но я не могу запустить jsfiddle в IETester с IE8 или IE9. Это просто беспорядок.

1 ответ

Решение

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

Основные проблемы: - Не используйте встроенные обработчики событий! - Методы могут быть заполнены только в том случае, если вы включили этот метод (extendNative) (поскольку они занимают много памяти). Для методов наилучшим вариантом является использование расширения webshims callProp.

  1. Удалить неиспользованный Модернизр:

Код:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="/branding/js-webshim/minified/polyfiller.js"></script>
<script>
    //webshims.setOptions('extendNative', true); //either use this or use $.callProp
    webshims.polyfill('forms');
</script>
  1. Удалить встроенный обработчик событий (это считается плохой практикой)

Код:

<form class="validate">
    <input name="texbox" type="text" required="required" />
    <input type="submit" />
</form>

3.: Теперь используйте JS, чтобы сделать что-то с вами

Код:

$(function(){
    //add events to submit and/or invalid
    $('form.validate').on('submit invalid', function(){
        if(window.console){
            console.log(e.type)
        }
        if(e.type == 'submit' && !$(this).callProp('checkValidity')){
            return false;
        }
    });
});
Другие вопросы по тегам