Ответ 1

Прежде всего я создатель webshims lib (один из тех полиполков, который больше не поддерживается). Чтобы ответить на ваш вопрос:

Стоит ли создавать формы polyfill для проекта?

Нет, это действительно сложно сделать только для одного проекта. Ну, я сделал это просто потому, что хочу использовать современные технологии.

Стоит ли использовать формы polyfill как webshims lib для проекта?

Да, абсолютно! И вот почему:

1. Хороший стандартизированный декларативный API-интерфейс для разметки

После включения веб-профайлов и создания сценариев следующее:

//polyfill forms (constraint validation) and forms-ext (date, range etc.)    
$.webshims.polyfill('forms forms-ext');

Вы можете просто написать свои виджеты и свои ограничения в свою форму:

<input type="date" />
<input type="date" min="2012-10-11" max="2111-01-01" />
<input type="range" disabled />
<input type="email" required placeholder="Yo you can use a placeholder" />

Это создаст 3 разных виджета, каждый из которых будет настроен по-разному. Никакой дополнительной JS не нужен только стандартизованный, чистый и скудный код.

2. Стандартизованный DOM-API

То же самое относится к DOM API. Вот только два примера: Объединение двух полей даты и объединение поля диапазона с поле даты.

3. работает без JS в современных браузерах

Грамотно деградирует в старых браузерах и хорошо работает в современных.

4. Меньший размер файла в современных браузерах

Особенно полезно для мобильных устройств (iOS 5, Blackberry, например, поддерживают дату)

5. Лучший UX [в основном мобильный]

Улучшенный мобильный UX (лучший интерфейс ввода для touch, более высокая производительность, подходит для системы), если вы его используете: type = "email" , type = "number" и type = "date" /type = "диапазон"

Но все же, как насчет настраиваемости?

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

Настройка проверки ограничений

Полиполняющая часть

//polyfill constraint validation
$.webshims.polyfill('forms');

Настройка пользовательского интерфейса для пузырька ошибок:

//on DOM-ready
$(function(){
    $('form').bind('firstinvalid', function(e){ 
        //show the invalid alert for first invalid element 
        $.webshims.validityAlert.showFor( e.target ); 
        //prevent browser from showing native validation message 
        return false; 
    });
});

генерирует следующую разметку:

<!-- the JS code above will generate the following custom styleable HTML markup for the validation alert -->
<span class="validity-alert-wrapper" role="alert"> 
    <span class="validity-alert"> 
        <span class="va-arrow"><span class="va-arrow-box"></span></span> 
        <span class="va-box">Error message of the current field</span> 
    </span> 
</span>

Настройка стиля недопустимого/действительного поля формы:

.form-ui-invalid {
    border-color: red;
}

.form-ui-valid {
    border-color: green;
}

Настройка текста предупреждения о достоверности:

<input required data-errormessage="Hey this is required!!!" />

А теперь, что точка:

• работает без JS
• современные браузеры загружают только код настройки (3kb min/gzipped), а старые браузеры загружают дополнительный API (около 13kb min/gzip) (формы включают в себя гораздо больше, чем просто API проверки ограничений, например, есть также автофокус, заполнитель, вывод и т.д.)

А что с вашим специальным примером, настраивая поле даты?

Нет проблем:

//configure webshims to use customizable widget UI in all browsers
$.webshims.setOptions('forms-ext', { 
    replaceUI: true
});

$.webshims.polyfill('forms forms-ext');

А также здесь:

• по-прежнему работает без JS в современных браузерах.
• современные браузеры загружают только пользовательский интерфейс и UI-API, но не DOM-API (valueAsNumber, valueAsDate...)

И вот, вот самое лучшее:

//configure webshims to use customizable widget UI in all non mobile browsers, but a customizable one in all desktop and all non-capable mobile browsers
$.webshims.setOptions('forms-ext', { 
    //oh, I know this is bad browser sniffing :-(
    replaceUI: !(/mobile|ipad|iphone|fennec|android/i.test(navigator.userAgent))
});

$.webshims.polyfill('forms forms-ext');

• меньший размер файла и лучший UX для мобильных браузеров (большинство клиентов и большинство дизайнеров будут любить вас за использование другого пользовательского интерфейса на мобильном телефоне!!!)
• по-прежнему работает без JS в современных браузерах.
• современные браузеры загружают только пользовательский интерфейс и UI-API, но не DOM-API (valueAsNumber, valueAsDate...)

Ответ 2

В подтверждение ответа Alexander webshims я провел значительные исследования по кросс-браузерному поведению входов HTML5 от UX, UI и front-end перспективы. Мое заключение состоит в том, что единственный способ предпочесть поведение между устройствами и браузерами - использовать polyfill как веб-сайты. Значительная часть этого связана с тем, что не может использовать встроенную функциональность на таких устройствах, как бочковые ролики для дат и числовых клавиатур для чисел, не имея также возможности поддерживать настольные браузеры, которые не реализуют эти функции.

Вот анализ того, как ввод данных ведет себя в разных исходных реализациях против популярных плагинов:
Анализ ввода данных - таблица Google
(Вы можете видеть, как webshims получает лучшее от всех реализаций)

Вот анализ того, как типы ввода реального мира ведут себя в общих браузерах изначально и с помощью резервного копирования webshim:
UX-анализ входов HTML5 с помощью резервного копирования webshim - таблица Google

Вот демо-страница, используемая для анализа этих входов:
Вводная страница HTML5 - Демо-версия CodePen

Ответ 3

Я тоже был настроен скептически, если действительно стоит использовать слой polyfill вместо прямого интерфейса jquery. После использования webshims lib и HTML5 я сразу понял, что существует гораздо меньший код javascript. Плагин проверки подлинности больше не требуется. Спасибо Alexander за создание и поддержку этого замечательного polyfill, webshims lib. Вот пример, чтобы сделать ajax-вызов в форме отправки клика формы.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js" type="text/javascript"></script>
<script>
    // set options for html5shiv
    if(!window.html5){
        window.html5 = {}; 
    }
    window.html5.shivMethods = false;
</script>
<script src="webshims/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="webshims/js-webshim/minified/polyfiller.js"></script>
    <script class="example">
        $.webshims.setOptions({
            //we do not use any DOM-/JS-APIs on DOM-ready, so we do not need to delay the ready event <- good against fouc
            waitReady: false
        });
        //load all polyfill features
        $.webshims.polyfill('forms forms-ext');     
    </script>
<script type="text/javascript">
$(function(){
    var frm = $('#tstForm');
    frm.submit(function () {
    var someDate=$('#someDate').val();
     alert('someDate:'+someDate);
     // you can make your ajax call here. 

        return false;
    });
});
</script>
</head>
<body>
<form id="tstForm">
  Some Date:<input id="someDate" name="someDate" type="date" min="2013-01-01" max="2013-06-01" ></input>
  Full Name:<input id="fullName" name="fullName" type="text" required></input>
  Age:<input id="age" name="age" type="number" required min="18" max="120"></input>
  <input type="submit" value="Submit"/>
</form>

</body>
</html>