JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<link rel="stylesheet" href="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/smoothness/jquery-ui-1.9.1.custom.min.css">
<script src="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryvalidate/jquery.validate.js"></script>
<form method="get" action="#" id="form1">
		<fieldset>
			<legend>アンケート</legend>
			<div>
				<div>好きな食べ物を選択して下さい</div>
				<input type="checkbox" value="1" name="food">和食 <input
					type="checkbox" value="2" name="food">中華 <input
					type="checkbox" value="3" name="food">イタリアン <input
					type="checkbox" value="4" name="food">フレンチ <span
					class="errorMsg"></span>
			</div>
			<br>
			<div>
				<div>タバコを吸っていますか？</div>
				<div>
					<input type="radio" value="yes" name="conf_tobacco">はい <input
						type="radio" value="no" name="conf_tobacco">いいえ <span
						class="errorMsg"></span>
				</div>
				<br>
				<div>1日の喫煙本数</div>
				<div>
					<input type="text" name="count">本 <span class="errorMsg"></span>
				</div>
			</div>
		</fieldset>
		<p>
		<fieldset>
			<legend>ユーザ情報登録</legend>
			<div>
				<div>URL(任意)</div>
				<input type="text" name="url"> <span class="errorMsg"></span>
			</div>
			<p>
			<div>
				<div>ユーザID&nbsp;&nbsp;("hifive"以外を入力すると「入力されたユーザ名は既に使用されています」がエラーメッセージに表示されます)</div>
				<input type="text" name="userid"> <span class="errorMsg"></span>
			</div>
			<div>
				<div>パスワードを入力(8～12文字)</div>
				<input type="password" name="pass"> <span class="errorMsg"></span>
			</div>
			<div>
				<div>パスワードを再入力</div>
				<input type="password" name="conf_pass"> <span
					class="errorMsg"></span>
			</div>
			<br>
		</fieldset>
		<br> <input type="submit" value="送信">
	</form>

CSS

@charset "utf-8";

#form1 {
	border: 1px solid black;
	padding: 15px;
}
.errorMsg {
	color: red;
}
.strong {
	font-weight: bold;
}
.rules {
	border-collapse: collapse;
}
.rules td {
	border: 1px solid black;
}

JavaScript

$(function() {
	h5.core.controller('body', {
		__name: 'sample.plugin.validationSampleController',
		__ready:function() {
			// バリデーターにルールやメッセージ等を設定
			this.$find('#form1').validate({
        // Submitイベントが実行された場合に、自動でバリデーションを実行
				onsubmit: true,
        // フォーカスが当たった場合に現在のエラー内容を一旦クリア
				focusCleanup: true,
        // バリデーションルール
				rules: {
					food: {
						required: true
					},
					conf_tobacco: {
						required: true
					},
					count: {
						required: {
							depends: '[name="conf_tobacco"][value="yes"]:checked'
						},
						number: {
							depends: '[name="conf_tobacco"][value="yes"]:checked'
						},
						min: {
							param: 1,
							depends: '[name="conf_tobacco"][value="yes"]:checked'
						},
						max: {
							param: 999,
							depends: '[name="conf_tobacco"][value="yes"]:checked'
						}
					},
					url: {
						url: true
					},
          // useridをパラメータのキーにして、/existsに結果を問い合わせる
          // サーバは"true"または"false"の文字列を返す必要がある
					userid: {
						required: true,
						minlength: 6,
						remote: '/exists'
					},
					pass: {
						required: true,
						rangelength: [8, 12]
					},
					conf_pass: {
						equalTo: '[name="pass"]'
					},
					policy: {
						required: true
					}
				},
				messages: {					// エラー時に表示するメッセージ
					food: {
						required: '1つ以上選択して下さい。'
					},
					conf_tobacco: {
						required: 'はい、またはいいえを選択して下さい'
					},
					count: {
						required: '「はい」を選択した場合は、喫煙本数を入力して下さい',
						number: '本数は数字で入力して下さい',
						min: '{0}以上の値を入力して下さい',
						max: '{0}以下の値で入力して下さい'
					},
					url: {
						url: '正しいURLを入力して下さい'
					},
					userid: {
						required: 'ユーザIDを入力して下さい。',
						minlength: '{0}以上で入力して下さい。',
						remote: '入力されたユーザ名は既に使用されています'
					},
					pass: {
						required: 'パスワードを入力して下さい',
						rangelength: '{0}以上{1}文字以下で入力して下さい'
					},
					conf_pass: {
						equalTo: 'パスワードが一致しません'
					}
				},
        // エラーメッセージの表示先を指定する
				errorPlacement: function(error, el)...