えんじにゃーず・ハイ

主にエンジニアや技術情報についてつらつら書き連ねるブログです

ValidationEngine.jsで複数項目をajaxで送信したい時

https://gyazo.com/6f4a771817bbb8f1f0093af284d91cd7

jQueryでバリデーションする時に便利なプラグインgithub.com

このプラグインを使ってajax経由で好きなバリデーションを掛けることができる。 各form部品をバリデートする際には

// 対象のフォームを指定する
$("#userForm").validationEngine();

$.validationEngineLanguage.allRules = {
  "exists_user": {
      "url": "/user/exists_user"
   }
}
<input class=" validate[ajax[exists_user]]" data-prompt-position="topLeft" maxlength="7" id="user_id" name="user_id" type="text">

これでuser_idのテキストボックスからフォーカスが外れた時にバリデートが掛かる。もう少し細かく書くとexists_userに指定したurlへGETリクエストが送信される。クエリストリングは対象formのid名とvalueとなる。 サーバーからはバリデートするid名とbooleanを返却すれば自由にチェックできる。チェックエラーの時はfalseを返却すればいい。

ただ、今回は複数のform部品をajaxで送信してチェック処理がしたいので対象formの値しか送信できないと困る。公式ドキュメントを読むとextraDataDynamicに送信したいidを配列で指定すれば良いようだ。

"exists_user": {
    "url": "/user/exists_user",
    "extraDataDynamic": ['#user_id', '#email']
}

これでGETリクエストされるクエリストリングには#user_idと#emailに入力された値が送信される。