フォームの入力チェックは地味に手間のかかるものですので、ちょっとした拡張機能のベースをを作成してみました。
jQuery 拡張
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | (function ($) { $.fn.extend({ requiredCheck: function (arg) { return this.each(function () { $(this).submit(function () { var result = true; $(this).find('input, select').each(function (i) { var $this = $(this); var type = $this.attr('type'); var msg = arg; if (this.nodeName === 'SELECT') { if ($this.val() === '-1') { $this.after('<div class="error-msg">' + msg + '</div>'); result = false; } } else if (type === 'checkbox') { if (!$this.prop('checked')) { $this.after('<div class="error-msg">' + msg + '</div>'); result = false; } } else if (type === 'text' || type === 'tel' || type === 'url' || type === 'email') { if ($this.val() === '') { $this.after('<div class="error-msg">' + msg + '</div>'); result = false; } } }); return false; }); }); } }); })(jQuery); |
呼び出し
1 2 3 | $('form').requiredCheck('必須項目です。'); |
使い方は form を指定して呼び出すだけです。引数にエラー用のメッセージを指定します。エラーメッセージはクラス名 error-msg の div を input の次に作成しています。
現状だとプロトタイプ並のためもう少しブラッシュアップが必要とおもいますが、それは改めて。
（藤崎）
