BLOG ブログ

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

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

更新日：2014/04/04

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

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

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

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

HTML例


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

<form>

<table>

<tr>

</td>

</tr>

<tr>

</select>

</td>

</tr>

</table>

</form>

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

JavaScript


$('form').formCheck();

$('form').formCheck();

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


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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

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

（藤崎）

一覧へ戻る

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

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ

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

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

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ

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