Fork me on GitHub

ValidateJS

About

ValidateJSはjQuery非依存のシンプルなフォームバリデーションライブラリです。

Githubリポジトリ

デモを見る

対応ブラウザ

モダンブラウザ(IEは10以上)、モバイルも対応しているつもりです。

不具合報告はこちらまでお願いします。

Install

$ npm install i78s.validatejs

Setup

webpackやrequireして使ってください

import Validate from '../../lib/Validate';

let $form = document.getElementById('form');
let validate = new Validate($form, option);

Options

option = {
    customValidate?: {
        [key: string]: (element: HTMLInputElement | HTMLSelectElement, form: HTMLFormElement) => {};
    }
    onCheckHandler?(element: HTMLInputElement | HTMLSelectElement, validity: ValidityState): void;
    onSubmitHandler?(): void;
}

onCheckHandler

formのinput / changeイベントが発火した際に呼ばれるcallbackを指定できます。

同梱されているValidateMessagesと組み合わせる事でHTML構造に依存しないエラー文言の制御が可能です。

import Validate from '../../lib/Validate';
import ValidateMessages from '../../lib/ValidateMessages';

let validateMessages = new ValidateMessages('.js-validate-messages');
let validate = new Validate('form', {
    onCheckHandler: function(element, validity) {
        let parent = element.parentNode;
        validateMessages.update(element.name, validity);

        validateMessages.toggleClass(parent, 'has-success', validity.valid);
        validateMessages.toggleClass(parent, 'has-error', !validity.valid);
    }
});

onSubmitHandler

formのsubmitイベントが発火した際に呼ばれるcallbackを指定できます。

onSubmitHandlerが未指定の場合はform.submitが呼ばれます。

import Validate from '../../lib/Validate';

let validate = new Validate('form', {
    onSubmitHandler: function() {
        // 例
        // this.disabled(true);
        // フォームの値を取得してajaxを投げる
        // 通信完了時に this.disabled(false); で送信ボタンのdisabledを解除
    }
});

customValidate

customValidateのkeyと同じname属性を持つinput / select要素が変更された際にカスタムバリデーションを設定する事ができます。

import Validate from '../../lib/Validate';

let validate = new Validate('form', {
    customValidate: {
        password: function(element, form) {
            this.trigger('change', form['passwordConfirm']);
        },
        passwordConfirm: function(element, form) {
            if (element.value !== form['password'].value) {
                element.setCustomValidity('パスワードが一致しません');
                return;
            }
            element.setCustomValidity('');
        }
    }
});

Demo

必須項目です
必須項目です 正しいメールアドレスの形式を入力してください
必須項目です 8文字上入力してください
必須項目です パスワードが一致しません
必須項目です