BLOG ブログ

ホームページ制作
BLOG
[ jQuery ] フォームの入力チェックをする

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

更新日：2014/04/04

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

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('&lt;div class="error-msg"&gt;' + msg + '&lt;/div&gt;');
                result = false;
              }

            } else if (type === 'checkbox') {
              if (!$this.prop('checked')) {
                $this.after('&lt;div class="error-msg"&gt;' + msg + '&lt;/div&gt;');
                result = false;
              }

            } else if (type === 'text' || type === 'tel' || type === 'url' || type === 'email') {
              if ($this.val() === '') {
                $this.after('&lt;div class="error-msg"&gt;' + msg + '&lt;/div&gt;');
                result = false;
              }

            }
          });

          return false;
        });

      });
    }

  });

})(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').requiredCheck('必須項目です。');

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

（藤崎）

一覧へ戻る

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

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ

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

FOLLOW US 最新の情報をお届けします

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ