ajax form

ajax形式

パフォーマンス向上薬に関する HTML フォーム。

注: Ajax 形式は Polymer に関連付けられていません。実際、依存関係はまったくありませんが、Polymer やその他のカスタム要素ライブラリでも問題なく動作するはずです。シンプルなカスタム要素のポリフィルを使用したい場合は、ajax-form も最適な選択です。

従来の<form>の何が問題なのでしょうか?

1. フォームを送信するとページが変更/リロードされるため、これを適切に防ぐのは簡単ではありません。

2. 送信されたフォームでカスタム ヘッダーを送信することはできません。

3. フォームが送信された後のサーバー応答を (簡単に) 解析することはできません。

4. 無効なフォーム/フィールドをプログラムで追跡するのは面倒です。

5. フォームデータを JSON として送信することはできません。

6. ユーザーが入力したデータをサーバーに送信する前にプログラムで拡張する機会はありません。

7. カスタム フォーム要素 (Web コンポーネント仕様を使用して作成されたものなど) は、従来の純粋な<form>を使用して送信することはできません。

ajax-formカスタム要素は、従来の<form>を拡張して追加機能を提供し、上記の問題を解決します。完全なドキュメントとデモについては、API ドキュメント ページを参照してください。

インストール

npm install ajax-form

使用

<form>要素のマークアップに含める必要がある必須のis="ajax-form"属性を除き、従来のフォームを使用するのと同じように ajax-form を使用します。 ajax-form は Web コンポーネントであるため、WC 仕様を実装していないブラウザでも ajax-form を利用できるようにするには、webcomponents.js などの Web コンポーネントのポリフィルを含める必要がある場合があります。 Ajax 形式にはハードな依存関係がありません。

ajax-formの非常に簡単な使用法は、 is属性が追加された通常の<form>とまったく同じように見えます。

 <form is="ajax-form" action="my/form/handler" method="post"><label>名前を入力してください: <input type="text" name="full_name"></label>. .</form>

完全なドキュメントとデモについては、API ドキュメント ページを参照してください。

統合

フォームフィールド Web コンポーネントを開発していますか? 以下の手順を読んで、フィールドが ajax-form と適切に統合されていることを確認してください。

提出中

カスタム要素がフィールドの現在の値を含むvalueプロパティを公開している場合、コンポーネントは Ajax フォームに適切に統合されます。 これが当てはまらない場合は、カスタム フィールドでネイティブ HTML フォーム フィールドがライト DOM の一部であることを確認する必要があります。 いずれの場合も、 valueプロパティを持つ要素にはname属性も含まれている必要があります。 ユーザー/インテグレーターは、このフィールドに適切な値を含める必要があります。

検証

カスタム フィールドがライト DOM でネイティブ HTML フォーム フィールドを公開している場合、それ以上行うことはありません。ajax フォームは、ユーザー/インテグレータがフィールドに追加した検証を尊重します。 制約属性は、ネイティブ HTML フォーム フィールドに配置する必要があります。

カスタム フィールドがデフォルトでライト DOM のネイティブ HTML フォーム フィールドを公開せず、ajax フォームに検証制約を尊重させたい場合は、これに対応する小さなコードを含める必要があります。 従うべき手順は次のとおりです。

1. 不透明な 0x0 <input type="text">フィールドをライト DOM のフィールドの直前に追加します。

2. フィールドと同じ値を使用して、 customElementRefプロパティを入力に追加します。

3. 入力の有効性がフィールドの有効性と常に一致するようにしてください。 これは、 HTMLInputElementに存在するsetCustomValidityメソッドを介して実行できます。

例については、 <file-input>カスタム要素のソース コードのsetValidationTargetメソッドを参照してください。

テスト

npm install
npm install -g grunt-cli
grunt

• パラメータを指定せずにgrunt実行すると、ローカルにインストールされたいくつかのブラウザに対してテストが行​​われます (詳細についてはコードベースを参照してください)。

• grunt shell:wctSauceを実行すると、SauceLabs 内の多数のブラウザに対してテストが実行されます。 まず、SauceLabs のユーザー名とキーが適切な環境変数に関連付けられていることを確認してください。