🧜🏻 🏊 👩🏿‍⚖️ サイト上のフォームの開発を容易にするライブラリ 👨🏼‍⚕️ 🏴 🥊

こんにちは、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 () { /* success action */ } }); }); });

そして、すべてが機能しているように見えますが、残念ながら、開発者は次のようなささいなことを忘れがちです。

フォーム提出の指示の欠如;
その結果、多くのリクエストを投稿する機能（再送信はブロックされません）;
キーボードからフォームを送信できない。
フォーム送信エラーの場合の表示不足（たとえば、サーバーが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>

 //    Yii 2 public function actionCallback() { $model = new CallbackForm(); $model->load(Yii::$app->request->post()) if ($model->validate()) { //   ,    $success if ($success) { return '<div class="alert alert-success form-replace"> </div>'; } } return '<div class="alert alert-danger"> </div>'; }

アルゴリズムは次のとおりです。フォームは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

読み込みプロセスを示すアイコンをボタンに追加します。

例：

 <!-- font awesome --> <button type="submit" class="btn btn-primary btn-loading" data-loading-icon="fa fa-refresh fa-spin">Submit</button> <!-- bootstrap glyph --> <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プロジェクト

サイト上のフォームの開発を容易にするライブラリ