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

サンプル1

お名前必須
メールアドレス必須
メールアドレス(確認)必須
電話番号必須
性別必須
現在の職業必須
好きなくだものは?必須

<form data-parsley-validate data-parsley-trigger="keyup focusout change input">
<input type="text" data-parsley-required data-parsley-error-message="お名前を入力してください" />
<input type="email" data-parsley-required data-parsley-error-message="メールアドレスを入力してください" data-parsley-type="email" id="email1" />
<input type="email" data-parsley-required data-parsley-equalto-message="メールアドレスが間違っています" data-parsley-type-message="false" data-parsley-required-message="メールアドレスを入力してください" data-parsley-type="email" data-parsley-equalto="#email1" />
<input type="tel" data-parsley-required data-parsley-error-message="電話番号を入力してください(半角10文字以上、18文字以下)" data-parsley-length="[10, 18]" />
<ul id="element-gender">
	<li>
		<label><input type="radio" name="gender" data-parsley-required data-parsley-errors-container="#error-gender" data-parsley-error-message="性別を選択してください" data-parsley-class-handler="#element-gender" />男性</label>
	</li>
	<li>
		<label><input type="radio" name="gender" />女性</label>
	</li>
</ul>
<div id="error-gender"></div>
<select data-parsley-required data-parsley-error-message="現在の職業を選択してください">
	<option value="">▼選択</option>
	<option value="フリーター">フリーター</option>
	<option value="高校生">高校生</option>
	<option value="大学生">大学生</option>
	<option value="正社員">正社員</option>
	<option value="契約社員">契約社員</option>
	<option value="派遣社員">派遣社員</option>
	<option value="夫・主婦">夫・主婦</option>
	<option value="無職">無職</option>
	<option value="その他">その他</option>
</select>
<ul id="element-fruit">
	<li><label><input type="checkbox" name="fruit" data-parsley-required data-parsley-errors-container="#error-fruit" data-parsley-error-message="好きなくだものを3つ以上選択してください" data-parsley-class-handler="#element-fruit" data-parsley-mincheck="3" />
			りんご</label></li>
	<li><label><input type="checkbox" name="fruit" />
			みかん</label></li>
	<li><label><input type="checkbox" name="fruit" />
			バナナ</label></li>
	<li><label><input type="checkbox" name="fruit" />
			メロン</label></li>
	<li><label><input type="checkbox" name="fruit" />
			いちご</label></li>
	<li><label><input type="checkbox" name="fruit" />
			マンゴー</label></li>
</ul>
<div id="error-fruit"></div>
<button type="submit">送信</button>
</form>