Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Bootstrap+Smokeでフォームの入力チェック

More than 3 years have passed since last update.

Bootstrapで作成しているページで入力チェックを行うためSmokeを使ってみた。
Smokeにはバリデーションの他にもいくつか機能があるが、今回はバリデーションのみを使用。

Smoke公式

http://alfredobarron.github.io/smoke/#/

ライブラリ&使用したバージョン

jQuery 1.12.4
Bootstrap 3.3.6
Smoke 3.1.1
※jQuery、Bootstrap 3は必須

導入・構成

Bower、npmでインストールできるが、今回サンプルではダウンロードして以下のように配置。

├── css
│   ├── smoke.css
│   └── smoke.min.css
├── js
│   ├── smoke-ja.js
│   ├── smoke-ja.min.js
│   ├── smoke.js
│   └── smoke.min.js
└── sample.html(今回作成するサンプル)

※jQuery、BootstrapはMicrosoft CDNを使用

メッセージの日本語化

公式サイトのlanguageより以下のリンクがあるのでlangからsmoke-ja.jsをダウンロードし、今回はjs配下に格納。
https://github.com/hidesuke/smoke

こちらの日本語化ファイルは、バージョンが2.2.3のものなのでメッセージが足りていないものがある。
smoke.js本体の先頭の方でlanguajeという変数で設定を行っているので、必要に応じて足りていないメッセージをsmoke-ja.jsにコピーして日本語の設定を行う。

使ってみる

サンプルの入力フォームはSmoke公式ページのものを拝借して。

CSS、JSの読み込み

sample.html
<!-- CSS -->
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/smoke.min.css">

<!-- JS -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
<script src="js/smoke.min.js"></script>
<script src="js/smoke-ja.js"></script>

バリデーションを行うスクリプト

sample.html
<script>
$(document).ready(function() {
    /**
     * バリデーションボタン押下時処理
     * バリデーションを行う
     */
    $('#btn-validate').on('click', function(e) {
        if ($('#sample-form').smkValidate()) {
            // バリデーションOKの処理
        } else {
            // バリデーションNGの処理
        }
    })

    /**
     * クリアボタン押下時処理
     * フォームのクリア
     */
    $('#btn-clear').on('click', function (e) {
        $('#sample-form').smkClear();
    });
});
</script>

サンプルフォーム

sample.html
<div id="sample-panel" class="panel panel-primary">
  <div class="panel-heading">Bootstrap + Smoke Validation</div>
  <div class="panel-body">
    <form id="sample-form" data-smk-icon="glyphicon-remove-sign">
      <div class="form-group">
        <label class="control-label">Text</label>
        <input type="text" class="form-control" placeholder="Enter text" required>
      </div>
      <div class="form-group">
        <label class="control-label">Select</label>
        <select class="form-control" required>
          <option value="">Select</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label">Textarea</label>
        <textarea class="form-control" rows="3" required></textarea>
      </div>
      <div class="form-group">
        <label class="control-label">Checkbox</label>
        <div class="checkbox">
          <label>
            <input type="checkbox" name="check" value="1" required>
            Checkbox
          </label>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label">Radio</label>
        <div class="radio">
          <label>
            <input type="radio" name="rad" value="option1" required>
            Option 1
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="rad" value="option2" required>
            Option 2
          </label>
        </div>
      </div>
      <div class="text-center">
        <button type="button" id="btn-validate" class="btn btn-primary">バリデーション</button>
        <button type="button" id="btn-clear" class="btn btn-default">クリア</button>
      </div>
    </form>
  </div>
</div>

実行イメージ

初期表示
初期表示.png

バリデーション実行
バリデーション.png

使い方説明

入力フォームの作り方

バリデーションエラーを表示するためには、入力フィールドのclassにform-controlを指定し、div.form-groupの中に記述する必要ある。

<div class="form-group">
  <label class="control-label">Text</label>
  <input type="text" class="form-control" placeholder="Enter text" required>
</div>

バリデーションチェック

$.smkValidate()で対象form内フィールドのバリデーションを行う。戻り値はバリデーション結果で全ての入力がOKならtrue、入力エラーがあればfalseとなる。

フォームのクリア

$.smkClear()で入力値とバリデーション結果のクリアを行う。入力値もクリアされるのでクリアされたくないフィールドにはdata-smk-noclear属性を付ける。

エラー時のアイコン設定

アイコン変更.png
対象のformにdata-smk-icon属性でクラスを指定すると、入力エラー時にフィールドの右端に表示されるアイコンが指定できる。標準ではBootstrapのGlyphiconsを使用するが、Font Awesomeなども使用可能。

Font Awesome使用方法
表示位置がずれるのでstyleでline-heightを設定

<style>
.fa.form-control-feedback { line-height: 34px; }
</style>

フォームのdata-smk-icon属性にFont Awesomeのiconクラスを指定
以下の例のようにspinも使用可能

<form id="sample-form" data-smk-icon="fa fa-spin fa-refresh">
   :
</form>

バリデーション設定

まず基本の必須チェックはrequired属性で指定。
表示するメッセージを変更する場合はdata-smk-msg属性で指定。
入力形式のチェックはinputタグのtype属性で自動判別してくれるものと、data-smk-type属性で指定するものがある。

属性 説明
required 必須入力チェック
data-smk-msg メッセージ文字列 エラー時のカスタムメッセージ
input[type]
minlength
maxlength
text
最小文字数
最大文字数
文字数制限
input[type] number 数値チェック
input[type]
data-smk-pattern
text
正規表現文字列
正規表現チェック
input[type]
data-smk-strongPass
password
defaut|week|medium|strong
パスワードチェック
default:4文字以上
week:6文字以上
medium:6文字以上の英数字混在
strong:6文字以上の英(小・大文字)数字混在
input[type] mail メールアドレスチェック
input[type] url URLチェック
input[type] date 日付チェック
yyyy-mm-dd形式(正規表現でやっているので厳密ではない)
input[type] time 時刻チェック
hh:flag_mm:ss形式(秒は省略可)
input[type] datetime 日時チェック
yyyy-mm-dd'T'hh:flag_mm:ss形式(正規表現でやっているので厳密ではない)
input[type] month 年月チェック
yyyy-mm形式
input[type] week 年週チェック
yyyy-'W'00(週目)形式
input[type] tel 電話番号チェック
'+'数値10〜15桁形式 先頭の'+'な無くても可
input[type] color カラーチェク
#000000形式
data-smk-type alphanumeric 英数字チェック
data-smk-type
data-smk-min
data-smk-max
number
最小値
最大値
数値範囲チェック
data-smk-type
data-smk-decimal-separator
decimal
小数に使用する記号(省略時は".")
数値チェック(小数OK)
data-smk-type
data-smk-decimal-separator
data-smk-thousand-separator
currency
小数に使用する記号(省略時は".")
3桁ごとの区切り文字(省略時は",")
通貨チェック

あとはjsで$.smkEqualPass()というパスワードの確認用に入力したものと一致しているかのチェックがある。

おわり

基本的にはHTMLの記述で設定でき、スクリプトはほとんど不要。
Bootstrapを使っている場合はお手軽に導入できるので、興味を持たれた方は試してみてはいかがでしょうか。

masch
noranekoworks
業務システム、Webサービス、モバイルアプリを中心に開発するエンジニア集団です。
http://www.noraneko.works/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away