[ jQuery ] フォームの入力チェックをする

投稿日:2013年8月20日

フォームの入力チェックは地味に手間のかかるものですので、ちょっとした拡張機能のベースをを作成してみました。

jQuery 拡張


(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);

呼び出し


$('form').requiredCheck('必須項目です。');

使い方は form を指定して呼び出すだけです。引数にエラー用のメッセージを指定します。エラーメッセージはクラス名 error-msgdivinput の次に作成しています。
現状だとプロトタイプ並のためもう少しブラッシュアップが必要とおもいますが、それは改めて。

(藤崎)

関連記事

カテゴリー: JavaScript, jQuery, WEB, サイト制作
  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル