元のページ:Parsley.jsの使い方~かなり汎用性ありのバリデーションoption・日本語
jquery.min.js Version: 2.2.4
parsley.min.js Version: 2.8.0
<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>