Vanilla JSでformバリデーションを実装する「BunnyJs」
jqueryを利用したくない。でもhtml5のデフォルトバリデーションだけでは物足りない。そんな時は「BunnyJs」。ES6で実装します。
[ 目次 ]
はじめに
こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。
この記事は過去に運用していたブログからの移行記事になります。
今回はbunnyjsというライブラリを利用して、vanilla js（pure js）のformバリデーションを実装していきます。
【前提条件として】
- npmを利用してフロントエンドのモジュールを管理
- parcelを利用してbuildとサーバー起動を行う
プロジェクトディレクトリの作成
$ mkdir -p sample-bunnyjs
$ cd sample-bunnyjs
インストール
bunnyjsを試すためにまずは必要なライブラリをインストールしていきましょう
parcelをインストール
$ npm install -g parcel-bundler
buildに必要なライブラリをインストール
$ npm init
$ npm install babel-preset-env -D
$ npm install node-sass -D
babelの設定ファイルを作成
$ touch .babelrc
.babelrc
{
"presets": [
"env"
]
}
bunnyjsインストール
$ npm install bunnyjs --save
Bootstrap4インストール
今回はCSSフレームワークのbootstrap4を利用してformを簡単に調整します。
$ npm install bootstrap --save
※スタイルだけ利用して、jqueryなどjsは読み込みません。
これで準備は完了です。
各ファイルを作成
ディレクトリとファイルを作成する
$ mkdir -p {src,public}
$ mkdir -p src/{js,scss,images}
$ touch src/index.html
$ touch src/js/app.js
$ touch src/scss/style.scss
エントリーポイントとなるsrc/index.html
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bunnyjs Sample</title>
</head>
<body>
<div class="container">
<h1>bunnyjs</h1>
<form id="form1" method="POST" novalidate="">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Name" required="" minlength="6" maxlength="18">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password" required="" minlength="6" maxlength="18">
</div>
<div class="form-group">
<label for="password_confirmation">Confirm Password</label>
<input type="password" name="password_confirmation" id="password_confirmation" class="form-control" placeholder="Password again" required="" minlength="6" maxlength="18">
</div>
<div class="form-group">
<label for="email">E-mail</label>
<input type="email" name="email" id="email" class="form-control" placeholder="E-mail" required="" maxlength="18">
</div>
<div class="form-group">
<label for="select">Select</label>
<select name="select" id="select" class="c-select form-control" required="">
<option value="" selected="">Select option</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="form-group">
<label for="photo">Photo</label>
<input type="file" name="photo" accept="image/jpeg, image/png" id="photo" class="form-control" placeholder="Photo" required="" maxfilesize="1" mindimensions="500x500">
</div>
<div class="form-group">
<label for="about">About</label>
<textarea name="about" id="about" class="form-control"></textarea>
</div>
<div class="form-group">
<label class="c-input c-radio">
<input name="agree" type="radio" value="1" required="">
<span class="c-indicator"></span>
I agree with Terms of Service
</label>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
</div>
<script src="js/app.js"></script>
</body>
</html>
src/js/app.js
import '../scss/style.scss';
import { Validation } from 'bunnyjs/src/Validation';
Validation.ui.config = {
classInputGroup: 'form-group',
classInputGroupError: 'was-validated',
classLabel: 'form-control-label',
tagNameError: 'div',
classError: 'invalid-feedback',
selectorInput: '[name]'
};
Validation.init(document.getElementById('form1'));
src/scss/style.scss
@import "../../node_modules/bootstrap/scss/bootstrap.scss";
parcelで起動
$ parcel src/index.html -d public
ブラウザで http://localhost:1234/ を開きます。未入力で"Submit"ボタンを押下し、requiredのエラーが出るかどうかご確認ください。
今回の成果物は こちら になります。
Netlifyでデモ環境を用意しています。以下のURLにてご確認ください。
https://agitated-stallman-153551.netlify.com/
補足
Netlifyにてデモ画面を構築する際に、parcel-bundlerをプロジェクト内にインストールするように修正しました。
github上のpackage.jsonは、parcel-bundlerが組み込まれています。
修正（2018/10/24）
デモページに関しては、サンプルで作ったものなので閉鎖しました。
