jQuery DataValidate プラグイン

フォームのデータを検証する jQuery プラグインです。

特徴

  • 必須項目のチェック
  • メールアドレスのチェック
  • チェック ボックスやセレクト ボックスの選択のチェック
  • 2つの項目が等しいかどうかのチェック
  • 数字のチェック
  • 文字数のチェック

使い方

スクリプトを読み込む

jQuery と datavalidate.js を読み込むように HTML に記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="datavalidate.js"></script>

フォームのデータを検証するスクリプト

フォームのデータを検証するスクリプトを下記のように記述します。

<script type="text/javascript">
jQuery(function($) {
  $("form#commentform").datavalidate();
});
</script>

フォーム

フォームのデータを検証する要素に、”data-validate” 属性を追加します。複数の値を指定する場合はスペース区切りで指定します。

<form id="commentform">
    <input type="text" name="email" data-validate="required email" />
</form>

data-validate の値

説明
required 空または未選択かチェックします。
number 数値かチェックします。
email メールアドレスとして正しいかチェックします。
equalTo[element]

2つの項目が等しいかチェックします。

element: 比較対象の要素

minLength[n]

最小文字数をチェックします。

n: 数字

maxLength[n]

最大文字数をチェックします。

n: 数字

errorTo[element]

エラーメッセージを表示する要素を指定します。

省略時は、親要素となります。

element: エラーメッセージを表示する要素

オプション

プロパティ デフォルト 説明
errorClass “error-text” エラー メッセージを表示する要素のクラスを指定します。
scrollOffset 0

エラー要素へスクリールする位置のオフセットを指定します。

例えば、WordPress の管理バーを考慮する場合は、$(‘#wpadminbar’).height() の値を設定します。

focusFirstField true エラー要素へスクリールするかかどうか。
validateNonVisibleFields false 非表示(hidden)要素のチェックをするかどうか。

ソースコード

datavalidate.js

/**
 * datavalidate.js
 * Version 1.1.0
 * Copyright 2013 ishitaka
 */
;
/*jslint browser: true*/
/*global jQuery*/
(function ($) {
    'use strict';

    var DataValidate = {},
        messages = {
            required: '必須項目です。',
            number: '数字で入力してください。',
            email: 'メールアドレスが正しくありません。',
            maxLength: '{count} 文字以下にしてください。',
            minLength: '{count} 文字以上にしてください。',
            select: 'いづれかを選択してください。',
            checked: 'チェックしてください。',
            equalTo: '入力された値が一致しません。'
        },
        defaultOptions = {
            errorClass: 'error-text',
            scrollOffset: 0,
            focusFirstField: true,
            validateHiddenFields: false
        },
        fields = {};

    DataValidate = function (form, options) {
        this.form = form;
        this.options = $.extend({}, defaultOptions, options);
        this.events();
    };

    DataValidate.prototype = {
        constructor: DataValidate,
        events: function () {
            var self = this;
            $(this.form).find(':submit').click(function () {
                if ($(this).hasClass("data-validate-skip")) {
                    return true;
                }
                fields = self.form.querySelectorAll('[data-validate]');
                self.reset();
                return self.validate();
            });
        },
        reset: function () {
            $("p." + this.options.errorClass).remove();
        },
        validate: function () {
            var form = this.form,
                trim = function (value) {
                    return typeof value === 'string' ? value.replace(/^\s+|\s+$/g, '') : value;
                },
                errorCounter = 0,
                regrule = new RegExp(/^(minLength|maxLength|equalTo|errorTo)\[([#|\.]?[A-Za-z0-9_\[\]\-]+)\]/i),
                i,
                j,
                validateField,
                methods,
                method,
                fieldVal,
                errorMessage,
                param,
                errorTo,
                rule,
                toVal;

            for (i = 0; i < fields.length; i += 1) {
                validateField = fields[i];
                methods = validateField.getAttribute('data-validate').split(' ');
                fieldVal = $(validateField).val();
                errorTo = null;

                if (this.options.validateHiddenFields || !$(validateField).is(':hidden')) {
                    errorMessage = "";
                    for (j = methods.length - 1; j >= 0; j -= 1) {
                        rule = methods[j].match(regrule);
                        if (rule !== null) {
                            if (typeof rule[2] !== 'undefined') {
                                param = trim(rule[2]);
                            }
                            method = rule[1];
                        } else {
                            method = methods[j];
                        }
                        switch (method) {
                        case 'errorTo':
                            errorTo = $(param);
                            break;
                        case 'required':
                            switch (validateField.type) {
                            case 'checkbox':
                                if ($(form).$(":checkbox:checked", this).size() === 0) {
                                    errorMessage = messages.check;
                                }
                                break;
                            case 'radio':
                                if ($(form).find("input[name='" + $(validateField).attr("name") + "']:checked").length === 0) {
                                    errorMessage = messages.select;
                                }
                                break;
                            case 'select-one':
                                if (fieldVal === "" || $(validateField).prop("selectedIndex") === 0) {
                                    errorMessage = messages.select;
                                }
                                break;
                            default:
                                if (fieldVal === "") {
                                    errorMessage = messages.required;
                                }
                                break;
                            }
                            break;
                        case 'number':
                            if (isNaN(fieldVal)) {
                                errorMessage = messages.number;
                            }
                            break;
                        case 'email':
                            if (fieldVal && !fieldVal.match(/^[\w_\-\.]+@[\w\-\.]+\.[\w]+/g)) {
                                errorMessage = messages.email;
                            }
                            break;
                        case 'equalTo':
                            toVal = "";
                            if (param.charAt(0) === "#" || param.charAt(0) === ".") {
                                toVal = $(param).val();
                            } else {
                                toVal = $(form).find('input[name="' + param + '"]').val();
                            }
                            if (fieldVal !== toVal) {
                                errorMessage = messages.equalTo;
                            }
                            break;
                        case 'minLength':
                            if (fieldVal.length !== 0 && fieldVal.length < param) {
                                errorMessage = messages.minLength.replace('{count}', param);
                            }
                            break;
                        case 'maxLength':
                            if (fieldVal.length !== 0 && fieldVal.length > param) {
                                errorMessage = messages.maxLength.replace('{count}', param);
                            }
                            break;
                        }
                    }
                    if (errorMessage !== "") {
                        if (errorTo === null) {
                            errorTo = $(validateField).parent();
                        }
                        errorTo.append('<p class="' + this.options.errorClass + '">' + errorMessage + '</p>');
                        if (errorCounter === 0 && this.options.focusFirstField) {
                            validateField.focus();
                            $(window).scrollTop($(validateField).offset().top - this.options.scrollOffset);
                        }
                        errorCounter = errorCounter + 1;
                    }
                }
            }
            return errorCounter === 0;
        }
    };

    $.fn.datavalidate = function (options) {
        return this.each(function () {
            var f = new DataValidate(this, options);
        });
    };
}(jQuery));

変更履歴

v1.1.0

  • 最初のリリース