ajax form
1.0.0
HTML-формы о препаратах, повышающих работоспособность.
Примечание. Ajax-форма не привязана к Polymer. Фактически, он вообще не имеет никаких зависимостей, но должен прекрасно работать с Polymer или любой другой библиотекой пользовательских элементов. Если вы предпочитаете использовать простой полифил настраиваемых элементов, ajax-форма также будет вашим лучшим выбором.
<form> ?Отправка формы изменяет/перезагружает страницу, и правильно предотвратить это не так уж и просто.
Вы не можете отправлять собственные заголовки с отправленной формой.
Вы не можете (легко) проанализировать ответ сервера после отправки формы.
Программное отслеживание недействительных форм/полей разочаровывает.
Вы не можете отправлять данные формы в формате JSON.
У вас нет возможности программно дополнять введенные пользователем данные перед их отправкой на сервер.
Пользовательские элементы формы (например, созданные с использованием спецификации веб-компонентов) не могут быть отправлены с использованием традиционного чистого <form> .
Пользовательский элемент ajax-form дополняет традиционную <form> , предоставляя дополнительные функции и решая проблемы, перечисленные выше. См. страницу документации API для получения полной документации и демонстраций.
npm install ajax-form
Используйте ajax-форму так же, как и традиционную форму, за исключением обязательного атрибута is="ajax-form" , который вы должны включить в разметку элемента <form> . Поскольку ajax-форма является веб-компонентом, вам может потребоваться включить полифил веб-компонента, например webcomComponents.js, чтобы браузеры, не реализующие спецификацию WC, могли использовать ajax-форму. Ajax-форма не имеет жестких зависимостей.
Очень простое использование ajax-form выглядит как обычная <form> с добавлением атрибута is :
<form is="ajax-form" action="my/form/handler" Method="post"><label>Введите свое имя: <input type="text" name="full_name"></label>.. .</форма>
Полную документацию и демонстрационные версии см. на странице документации API.
Вы разрабатываете веб-компонент поля формы? Прочтите инструкции ниже, чтобы убедиться, что ваше поле правильно интегрируется с ajax-формой.
Ваш компонент будет прекрасно интегрироваться в форму ajax при условии, что ваш пользовательский элемент предоставляет свойство value , содержащее текущее значение поля. Если это не так, то ваше настраиваемое поле должно гарантировать, что собственное поле HTML-формы является частью облегченного DOM. В любом случае элемент со свойством value также должен содержать атрибут name . Ваш пользователь/интегратор должен будет указать соответствующее значение в этом поле.
Если ваше настраиваемое поле предоставляет собственное поле HTML-формы в облегченном DOM, то больше нечего делать — ajax-form будет учитывать любую проверку, которую ваш пользователь/интегратор добавляет в поле. Атрибут(ы) ограничения ДОЛЖЕН быть размещен в собственном поле HTML-формы.
Если ваше настраиваемое поле по умолчанию НЕ предоставляет собственное поле HTML-формы в облегченном DOM, и вы хотите, чтобы ajax-форма учитывала ограничения проверки, вам нужно будет включить небольшой код для учета этого. Вот шаги, которые необходимо выполнить:
Добавьте непрозрачное поле <input type="text"> 0x0 в светлый DOM непосредственно перед вашим полем.
Добавьте к входным данным свойство customElementRef со значением, равным вашему полю.
Убедитесь, что действительность ввода всегда соответствует действительности вашего поля. Вы можете сделать это с помощью метода setCustomValidity , присутствующего в HTMLInputElement .
Пример см. в методе setValidationTarget в исходном коде пользовательского элемента <file-input> .
npm install npm install -g grunt-cli grunt
Запуск grunt без каких-либо параметров будет протестирован на нескольких локально установленных браузерах (подробности см. в базе кода).
Запуск grunt shell:wctSauce запустит тесты для нескольких браузеров в SauceLabs. Сначала убедитесь, что имя пользователя и ключ SauceLabs привязаны к соответствующим переменным среды.
