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

投稿日:2013年8月26日

フォームの入力チェックをするでフォームの入力チェックの拡張機能を作成しましたが、もうすこし使いやすくしました。

jQuery を読み込んだ後に読み込んでください。
20130826.js

まず HTML 側にクラスを指定します。使用するクラス名は以下のとおりです。

error-block
チェックしたい入力の要素とエラーメッセージの要素を囲むブロックです
error-text
エラーメッセージを出す要素です
required
必須項目にしたい input または textarea または select に指定します。未選択の selectvalue は -1 を設定します。
numeric
数字のみ許可したい input に指定します。
alphabetic
アルファベットのみ許可したい input に指定します。
hiragana
ひらがなのみ許可したい input に指定します。
katakana
カタカナのみ許可したい input に指定します。
mail
メールアドレスのみ許可したい input に指定します。
zenkaku
全角のみ許可したい input に指定します。

HTML例


<form>
  <table>
    <tr>
      <th>氏名</th>
      <td class="error-block">
        <input type="text" name="" class="required zenkaku">
        <span class="error-text"></span>
      </td>
    </tr>
    <tr>
      <th>年齢</th>
      <td class="error-block">
        <select name="" class="required">
          <option value="-1"></option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </td>
    </tr>
  </table>
</form>

JavaScript は form を指定して呼び出すだけです。複数でもできます。

JavaScript


$('form').formCheck();

オプションでエラーメッセージを指定できます。下記例のテキストがデフォルトになっています。


$('form').formCheck({
  required: '入力してください',
  numeric: '数字で入力してください',
  alphabetic: 'アルファベットで入力してください',
  hiragana: 'ひらがなで入力してください',
  katakana: 'カタカナで入力してください',
  mail: 'メールアドレスを入力してください',
  zenkaku: '全角で入力してください'
});

ソース


(function ($) {

  if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement) {
      for(var i = 0; i < this.length; i += 1) {
        if (this[i] === searchElement) return i;
      }
      return -1;
    }
  }

  var charCheck = {
    ascii: function (target) {
      return !!target.match(/^[x20-x7E]+$/);
    },

    numeric: function (target) {
      return !!target.match(/^[0-9]+$/);
    },

    alphabetic: function (target) {
      return !!target.match(/^[a-zA-Z]+$/);
    },

    alphanumeric: function (target) {
      return !!target.match(/^[a-zA-Z0-9]+$/);
    },

    hiragana: function (target) {
      return !!target.match(/^[ぁ-ん]+$/);
    },

    katakana: function (target) {
      return !!target.match(/^[ァ-ン]+$/);
    },

    mail: function (target) {
      return !!target.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/);
    },

    zenkaku: function (target) {
      var i, charCode;

      for (i = 0; i < target.length; i += 1) {
        charCode = target.charCodeAt(i);
        if (charCode < 256 || (charCode >= 0xff61 && charCode <= 0xff9f)) {
          return false;
        }
      }

      return true;
    }
  };

  var checkOK = function ($that) {
    $that.parents('.error-block').find('.error-text').text('');
    return false;
  };

  var checkNG = function ($that, text) {
    $that.parents('.error-block').find('.error-text').text(text);
    return true;
  };

  var requiredCheck = function ($element, options) {
    var errorFlag = [];

    $element.each(function (i) {
      var $this = $(this);
      var node = this.nodeName.toLowerCase();
      var type = $this.attr('type');

      if (node === 'select') {
        errorFlag[i] = $this.val() !== '-1' ? checkOK($this) : checkNG($this, options.required);

      } else if (node === 'input' || node === 'textarea') {
        if (type === 'checkbox') {
          errorFlag[i] = $this.prop('checked') ? checkOK($this) : checkNG($this, options.required);

        } else {
          errorFlag[i] = $this.val() !== '' ? checkOK($this) : checkNG($this, options.required);
        }
      }
    });

    return (errorFlag.indexOf(true) > -1);
  };

  var inputCheck = function ($element, options) {
    var errorFlag = [];
    var i = -1;

    $element.filter('.numeric').each(function () {
      var $this = $(this);
      errorFlag[i += 1] = charCheck.numeric($this.val()) ? checkOK($this) : checkNG($this, options.numeric);
    });

    $element.filter('.alphabetic').each(function () {
      var $this = $(this);
      errorFlag[i += 1] = charCheck.alphabetic($this.val()) ? checkOK($this) : checkNG($this, options.alphabetic);
    });

    $element.filter('.hiragana').each(function () {
      var $this = $(this);
      errorFlag[i += 1] = charCheck.hiragana($this.val()) ? checkOK($this) : checkNG($this, options.hiragana);
    });

    $element.filter('.katakana').each(function () {
      var $this = $(this);
      errorFlag[i += 1] = charCheck.katakana($this.val()) ? checkOK($this) : checkNG($this, options.katakana);
    });

    $element.filter('.mail').each(function () {
      var $this = $(this);
      errorFlag[i += 1] = charCheck.mail($this.val()) ? checkOK($this) : checkNG($this, options.mail);
    });

    $element.filter('.zenkaku').each(function () {
      var $this = $(this);
      errorFlag[i += 1] = charCheck.zenkaku($this.val()) ? checkOK($this) : checkNG($this, options.zenkaku);
    });

    return (errorFlag.indexOf(true) > -1);
  };

  $.fn.extend({

    formCheck: function (options) {

      var defaults = {
        required: '入力してください',
        numeric: '数字で入力してください',
        alphabetic: 'アルファベットで入力してください',
        hiragana: 'ひらがなで入力してください',
        katakana: 'カタカナで入力してください',
        mail: 'メールアドレスを入力してください',
        zenkaku: '全角で入力してください'
      };

      var o = $.extend(defaults, options);

      return this.each(function () {

        $(this).submit(function () {
          var $this = $(this);
          var errorFlag;

          errorFlag = requiredCheck($this.find('.required'), o);
          if (!errorFlag) errorFlag = inputCheck($this.find('input'), o);

          return !errorFlag;
        });

      });

    }

  });

})(jQuery);

(藤崎)

関連記事

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