フォームのデータを検証する jQuery プラグインです。
特徴
- 必須項目のチェック
- メールアドレスのチェック
- チェック ボックスやセレクト ボックスの選択のチェック
- ２つの項目が等しいかどうかのチェック
- 数字のチェック
- 文字数のチェック
使い方
スクリプトを読み込む
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 | 数値かチェックします。 |
| メールアドレスとして正しいかチェックします。 | |
| 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
- 最初のリリース