Parsley.jsフォームサンプルだよ!

参照:http://parsleyjs.org/

元のページ:Parsley.jsの使い方~かなり汎用性ありのバリデーションoption・日本語

Parsley.js for jQuery

jquery.min.js Version: 2.2.4
parsley.min.js Version: 2.8.0

サンプル3

お名前必須
メールアドレス必須

<div class="bs-callout bs-callout-warning hidden">
  <h4>入力がどこか間違っているよ!</h4>
  <p>エラーの箇所を見直してね</p>
</div>

<div class="bs-callout bs-callout-info hidden">
  <h4>全部入力正しいよ!</h4>
  <p>問題なく入力完了しました。</p>
</div>
<script type="text/javascript">
$(function () {
  $('#sample-form').parsley().on('field:validated', function() {
    var ok = $('.parsley-error').length === 0;
    $('.bs-callout-info').toggleClass('hidden', !ok);
    $('.bs-callout-warning').toggleClass('hidden', ok);
  })
});
</script>

<form id="sample-form" data-parsley-validate>
<input type="text" data-parsley-required data-parsley-error-message="お名前を入力してください" />
<input type="email" data-parsley-required data-parsley-error-message="メールアドレスを入力してください" data-parsley-type="email" />
<button type="submit">送信</button>
</form>