こんにちは、Habr！
小さい（わずか6 Kバイト）
js-libraryを公開し
ます 。これにより、Webサイト開発時のフォームの操作が大幅に容易になり、コード記述を減らすことができます。
多かれ少なかれ中規模および大規模のプロジェクトには、12を超えるフォームがあり、その多くはAJAXを介して送信することが望ましいものです。 多くの場合、ハンドラーはこのために単にハングアップし、次のようなスクリプトが作成されます。
$(function () { $('.contact-submit').click(function () { $.ajax({ url: '/path/to/action', method: 'post', data: $(this).closest('form').serialize(), success: function () { } }); }); });
そして、すべてが機能しているように見えますが、残念ながら、開発者は次のようなささいなことを忘れがちです。
- フォーム提出の指示の欠如;
- その結果、多くのリクエストを投稿する機能（再送信はブロックされません）;
- キーボードからフォームを送信できない。
- フォーム送信エラーの場合の表示不足（たとえば、サーバーが500番目のエラーで応答した）。
- jsスクリプトのコントローラーURLハードコード。
さらに、ほとんどの類似ライブラリでは考慮されていない多くの微妙な点があります。たとえば、フォームを送信するボタンの
name=value渡す、
<input type="image">および属性
form, formaction, formmethodます。
そして、大規模なプロジェクトには多くのフォームがあるという事実を考えると、結果としてフォームの各タイプのそのようなハンドラーは、かなりの量のコードを形成します。 しかし、多くの場合、フォームは「フィードバックフォーム」のように非常に単純で、フォームを送信してステータスを表示するだけで済みます。手紙が送信されたか、エラーが発生しました。 この記事で説明されているライブラリの助けを借りて、このような単純なフォームのコードを作成することはまったくできません。
可能性について説明し始めます。
古いブラウザのhtml5属性のサポート
属性
form, formaction, formmethod, formenctype, formtargetおかげで、
form, formaction, formmethod, formenctype, formtarget動作を柔軟に変更できます。 最も一般的な例は、ユーザーがチェックボックスを使用して選択した一連のオブジェクトに対する操作の選択です。
サンプルコード <div class="items"> <div class="item"> <input type="checkbox" form="mass"> <form action="/cart/add"> <input type="text" value="1"> <button type="submit"> </button> </form> </div> <div class="item"> <input type="checkbox" form="mass"> <form action="/cart/add"> <input type="text" value="1"> <button type="submit"> </button> </form> </div> ... <form id="mass" method="post"> <button type="submit" formaction="/controller/move"></button> <button type="submit" formaction="/controller/delete"></button> </form> </div>
formactionと
formactionの助けを借りて、ネストされたフォームの不可能性の問題と、アクションに応じたコントローラーURLの選択を解決することができました。
ライブラリは、これらの属性をサポートしていないブラウザにポリフィルを提供します（IE <10）。
デモ再送信ブロックとステータス表示
多くの人がこれに何度も会ったことがあると思います。ユーザーが送信ボタンを数回クリックすると、その結果、たとえば1つのコメントではなく、3つが同時に公開されます。 多くの場合、このような影響を避けるために、クリック後に送信ボタンを無効にするスクリプトを作成し、フォームをキーボードから送信できることを忘れます。
ライブラリは、送信プロセスの進行中に
form-loadingクラスも追加するため、このフォーム状態を必要に応じてCSSスタイル設定できます。
前のフォームが完了するまでフォームを再送信する必要がある場合は、
form-no-blockクラスを追加してください。
デモ送信時に空白フィールドをフィルタリングする
この機能は、URLをより視覚的に見せるために、多くのフィールドがある製品検索/フィルタリングフォームに役立ちます。 アドレスバーで見る方が良いことに同意する
example.com/?price_to=1000より
example.com/?price_to=1000&price_to=&amount_from=&amount_to=form-no-emptyクラスを追加するだけです。
デモAJAXフォーム送信
これはおそらくライブラリの主な機能の1つです。 残念ながら、多くのプラグインはAJAXを介してフォームを送信できますが、残念ながらできません。 特に、前述の
form 、
formaction 、
formmethodのhtml5属性のサポートを実装し、アクティブな送信ボタンのパラメーターと
<input type="image">座標を渡します。 AJAXを介してフォームを送信するには、
form-ajax CSSクラスをフォームに追加し、結果を表示するために、
<output>タグまたは
form-outputクラスを持つ別のタグを
form-output内の任意の場所に追加する必要があります。 フォーム外の要素を指定できます;このために、
data-form-output属性でこの要素のjQueryセレクターを指定します。 応答のルート要素で同様の属性を使用できます（より優先されます）。 応答のルート要素にCSSクラス
form-replaceがある場合、フォーム自体が出力要素として使用され、置き換えられます。これは、「ワンタイム」フォームに非常に便利です。 例としてフィードバックフォームを使用してこれを検討してください。
フィードバックフォームコード <form action="/site/callback" method="post" class="form-ajax"> <div class="form-group"> <label></label> <input type="text" name="name"> </div> <div class="form-group"> <label>Email</label> <input type="text" name="email"> </div> <div class="form-group"> <label></label> <textarea name="message"></textarea> </div> <output></output> <button type="submit"></button> </form>
アルゴリズムは次のとおりです。フォームはAJAXを介して送信され、検証に合格し、送信にエラーがない場合は、すべてが正常であることを示すBootstrap Alertを出力し、フォームを置き換えます。 エラーがある場合は、それらを
<output> 。 また、JavaScriptの単一行はありません。 ライブラリは、Bootstrap Alertをサポートしているため、自動的に
alert-dismissible 、独立して閉じるボタンを追加します。
AJAXフォームに対して次のイベントが生成されます。
formajaxbeforeフォームを送信する前に、 $.ajaxすべての設定を変更できます。formajaxdoneが成功した場合。formajaxfailエラーの場合;formajaxalwaysいずれの場合でも、AJAXリクエストの完了後。
一般に、これにより、URLとパラメーターの転送でルーチンをバイパスして、成功した応答のイベントにコードを直接ハングさせることができるため、独自のスクリプトを簡単に作成できます。 イベントでは、
e.preventDefault()呼び出すだけで、スクリプトのデフォルトの動作をキャンセルできます。コンテンツの出力の操作は発生しません。
反対に、ロードされたコンテンツが必要であり、さらに、初期化する必要がある他のコンポーネント（たとえば、datepicker）が含まれている場合。 このため、ライブラリはさらに2つのイベントを生成します。
contentprepareコンテンツをDOMに追加する前。contentinit -DOMにコンテンツを追加した後。
私自身は、すべてのプラグインで同じ初期化手順を使用する方が簡単だと結論付けたため、このプロセスに至りました。
$(function () { $(document).trigger('contentinit', [$(document)]); }); $(document).on('contentinit', function (e, cont) { cont.find('.datepicker').datepicker(); });
つまり、ページが読み込まれると、
contentinitイベントも生成します。このイベントに、すべてのプラグインを初期化するハンドラーをアタッチします。
デモAJAXファイルのアップロード
古いブラウザはこれを行う方法を知らないため、ページをリロードせずにファイルを含むフォームを送信することはさらに難しく、このプロセスをエミュレートするにはiframeメソッドが必要です。 ここでは自転車を発明しませんでした。この機能を
malsup jquery.form shouldersプラグインに完全に提供し、送信する方法を1つだけ残しました。 サーバー側では、すべてが標準的な方法でフォームを送信しているように見えます。
ファイルを含むフォームを送信するには、malsup jquery.formプラグインを接続し、enctype = "multipart / form-data"を指定する必要があります。 このメソッドによって送信されたフォームの場合、追加のイベントが生成されます：
formajaxprogress現在の状態について通知するイベント。
デモAJAXリダイレクト
別の小さな便利な小さなもの。 ページを新しいページに切り替える（リダイレクトする）には、
X-Redirectヘッダーを指定します。このヘッダーの値は、移動先のURLです。
デモボタン、AJAXフォームでの古典的な送信用
AJAXフォームに、通常の方法でフォームを送信する1つ以上のボタンがあるようにすることができます。 たとえば、カートページで使用します。ユーザーが製品の数量を変更すると、AJAXを使用して変更を保存します。 「登録に移動」ボタンをクリックすると、同じフォームの通常の送信が行われます。
デモ送信ボタンの外観を変更する
ライブラリには、送信ボタンの外観を変更して、フォームが送信中であることをユーザーが理解できるように、さらにいくつかのヘルパーが用意されています。 これを行うには、ボタンに
btn-loading CSSクラスを追加し、オプションの一方または両方を使用します。
data-loading-text属性-フォームdata-loading-text中にボタンテキストを属性で指定されたものに変更し、完了後にそれを返します。- attribute
data-loading-icon読み込みプロセスを示すアイコンをボタンに追加します。
例：
<button type="submit" class="btn btn-primary btn-loading" data-loading-icon="fa fa-refresh fa-spin">Submit</button> <button type="submit" class="btn btn-primary btn-loading" data-loading-icon="glyphicon glyphicon-refresh">Submit</button>
さらに、1つ以上のボタンに
btn-submit-defaultクラスを指定できます。フォームがキーボードから送信された場合、ボタンの外観は変わります。
デモフォームのアラート
検証エラーなど、フォームに警告またはエラーメッセージを表示する必要がある場合があります。 このライブラリは、ブートストラップアラートをフォーム出力要素に追加するためのシンプルなインターフェイスを提供します。 このように使用します：
$('form').formAlert('! <b> </b>!', 'danger'); $('form').formAlert('#external-alert', 'success', true);
デモおわりに
ライブラリは、
paulzi-formという名前でnpmおよび
paulzi-formリポジトリで利用できます。
bower install paulzi-form npm install paulzi-form
彼女は非常に若いので、githubでバグ報告を待っています。 誰かが私だけでなく誰かにとっても人生を楽にしてくれると嬉しいです。
GitHubプロジェクト