簡単。Bootstrapでバリデーションチェックができるフォームを作成する方法とサンプル

Bootstrapとvalidator.jsというプラグインを利用したBootStrapで作るバリデーションチェック機能付きフォームの作成方法です。

引用元 http://1000hz.github.io/bootstrap-validator/

HTML5で作成するフォームですが、input要素にrequireプロパティーをつけた場合、エラーコメントが「このフィールドを入力してください」という固定文言が出ます。

今回紹介するプラグインでは入力にエラーが合った場合いのフィードバックコメントのアレンジもこのプラグインでは出来ます。

このプラグインはMITライセンスで使えます。

ただし、IE9以下の古いブラウザでは動作の保障がありませんので、スマホサイトなどのモダンブラウザで使用する事をお勧めします。

フィードバックコメントの設定方法 input要素に以下のプロパティーを追加するとフィードバックコメントの変更ができます。

data-required-error=””	項目が空の場合のコメント
data-pattern-error=””	パターンの値と一致しない場合のコメントパターンは次のプロパティでっせてい出来ます。　pattern=”^[_A-z0-9]{1,}$”
data-match-error=””	データが一致しない場合のコメント
data-error=””	その他のエラーがあった場合のコメント

サンプルデモページ

ライトプラン　詳細はこちら

ＨＴＭＬコード

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Validator validator.js サンプル</title>
    <link rel="stylesheet" href="../common/css/bootstrap.css">
    <script src="../common/js/jquery-1.11.3.min.js"></script>
    <script src="validator.js"></script>
    <script src="../common/js/bootstrap.js"></script>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    .error{
        color:red;
    }
    </style>
  </head>
  <body>
    <div class="page-header text-center">
      <h1>Bootstrap Validator validator.js サンプル</h1>
    </div>
    <div class="container">
      <form data-toggle="validator" role="form">
        <div class="form-group has-feedback">
          <label for="inputName" class="control-label">
            <span class="label label-danger">必須項目</span>　名前
          </label>
          <input type="text" class="form-control" id="inputName" placeholder="名前を入力" data-required-error="名前の入力は必須です" required>
          <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
          <div class="help-block with-errors"></div>
        </div>
        <div class="form-group has-feedback">
          <label for="inputTwitter" class="control-label">
            <span class="label label-danger">必須項目</span>　Twitterアカウント名
          </label>
          <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" data-pattern-error="英数字以外の文字が入力されています" data-required-error="Twitterアカウントの入力は必須です" required>
          </div>
          <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
          <div class="help-block with-errors">Twitterアカウント名を入力してください</div>
        </div>
        <div class="form-group has-feedback">
          <label for="inputEmail" class="control-label">
            <span class="label label-danger">必須項目</span>　メールアドレス
          </label>
          <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="メールアドレスが正しく入力されておりません" data-required-error="メールアドレスの入力は必須です" required>
          <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
          <div class="help-block with-errors"></div>
        </div>
        <div class="form-group">
          <label for="inputPassword" class="control-label">
            <span class="label label-danger">必須項目</span>　パスワード
          </label>
          <div class="row">
            <div class="form-group has-feedback col-sm-6">
              <input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="パスワードを入力" data-required-error="パスワードの入力は必須です" required>
              <div class="help-block">6文字以上で設定してください。</div>
            </div>
            <div class="form-group has-feedback col-sm-6">
              <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-required-error="確認用パスワードの入力は必須です" data-match-error="パスワードが一致しません" placeholder="確認用パスワードを入力" required>
              <div class="help-block with-errors"></div>
            </div>
          </div>
        </div>
        <div class="form-group has-feedback">
          <p>選択してください</p>
          <div class="radio">
            <label>
              <input type="radio" name="underwear" required>ボクサー 
            </label>
          </div>
          <div class="radio">
            <label>
              <input type="radio" name="underwear" required>ブリーフ 
            </label>
          </div>
        </div>
        <div class="form-group has-feedback">
          <p>承認するにチェックを入れてください</p>
          <div class="checkbox">
            <label>
              <input type="checkbox" id="terms" data-error="問題がなければ承認するにチェックを入れてください" required>承認する 
            </label>
            <div class="help-block with-errors"></div>
          </div>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary">送信</button>
        </div>
      </form>
    </div>
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="validator.min.js"></script>
  </body>
</html>

簡単。Bootstrapでバリデーションチェックができるフォームを作成する方法とサンプル

サンプルデモページ

ＨＴＭＬコード

“簡単。Bootstrapでバリデーションチェックができるフォームを作成する方法とサンプル” への1件のフィードバック

コメントを残すコメントをキャンセル

サンプルデモページ

ＨＴＭＬコード

こんな記事も読まれています。

簡単！Bootstrap3によるカードデザインレイアウト

簡単！コピペで作れる！Bootstrapで作るステップバーナビゲーション

Bootstrap4フッターテンプレートのデザイン参考サイト集

“簡単。Bootstrapでバリデーションチェックができるフォームを作成する方法とサンプル” への1件のフィードバック

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル