exValidation

新規会員登録

は必須項目です

	$('form').submit(function(){ window.scrollTo(0, 1); });

		//パスワード強度表示用要素を追加
		$("#pass").after('<span class="passwordScore"></span>');
		$("#pass").password({
			score: ".passwordScore"
		});

		//exValidationの初期設定
		var validation = $("#regist").exValidation({

			//バリデーションルールの設定
			rules: {
				id: "chkhankaku chkrequired",
				pass: "chkhankaku chkrequired chkmin6",
				passConfirm: "chkhankaku chkrequired chkretype-pass chkmin6",
				name: "chkrequired",
				kana: "chkrequired chkkatakana",
				mailGroup: "chkrequired chkemail chkhankaku",
				mailConfirmGroup: "chkrequired chkhankaku chkemail chkretype-mailGroup"
	   			mediaGroup: "chkgroup chkcheckbox chktoggle_media4_otherValue",
	      		otherValue: "chkrequired",
				job: "chkselect"
	    	},

			//エラーがあった場合にアラートを表示
			customAddError: function() {
				if ($("#alert").length < 1) {
					$("#regist table").before('<div id="alert"><strong>入力内容に誤りがあります。内容を修正して再度[この内容で登録する]ボタンをクリックしてください</strong></div>');
				}
			},

			//スクロール位置の調節
			customScrollAdjust: function() {
				var offset = $("#regist").offset(); 
				return offset.top;
			},

			//その他オプション
			errFocus: true,
			errInsertPos: 'before',
			errPosition: 'fixed',
			stepValidation: true,
			scrollToErr: true
		});
			
	<form method="post" action="mail.cgi" name="regist" id="regist">
		
		<div class="form-group">
			<label>ID<span class="require">※</span></label>
			<input class="form-control" type="text" name="id" id="id" size="20" />
		</div>
		<div class="form-group">
			<label>パスワード<span class="require">※</span></label>
			<input class="form-control" type="password" name="pass" id="pass" size="20" />
		</div>
		<div class="form-group">
			<label>パスワード(確認)<span class="require">※</span></label>
			<input class="form-control" type="password" name="passConfirm" id="passConfirm" size="20" />
		</div>
		<div class="form-group">
			<label>氏名<span class="require">※</span></label>
			<input class="form-control" type="text" name="name" id="name" size="30" />
		</div>
		<div class="form-group">
			<label>フリガナ<span class="require">※</span></label>
			<input class="form-control" type="text" name="kana" id="kana" size="30" />
		</div>
		<div class="form-inline">
			<label>メールアドレス<span class="require">※</span></label>
			<input class="form-control" type="text" name="mailGroup" id="mailGroup" value="" size="30" />
		</div>
		<div class="form-inline">
			<label>メールアドレス(確認)<span class="require">※</span></label>
			<input class="form-control" type="text" name="mailConfirmGroup" id="mailConfirmGroup" value="" size="30" />
		</div>
		<div class="form-group">
			<label>職業<span class="require">※</span></label>
			<select name="job" id="job">
				<option value="" selected="selected">選択してください</option>
				<option value="会社員">会社員</option>
				<option value="役員">役員</option>
				<option value="経営者">経営者</option>
				<option value="個人事業主">個人事業主</option>
				<option value="学生">学生</option>
				<option value="専業主婦">専業主婦</option>
				<option value="パート・アルバイト">パート・アルバイト</option>
			</select>
					
		</div>
		<div class="form-group">
			<div id="where">
				<label>どこで知りましたか?<span class="require">※</span></label>
			</div>
			 <div id="media">
				<ul id="mediaGroup">
					<li><label for="media1"><input type="checkbox" name="media" id="media1" value="検索" />検索</label></li>
					<li><label for="media2"><input type="checkbox" name="media" id="media2" value="ブログ" />ブログ</label></li>
					<li><label for="media3"><input type="checkbox" name="media" id="media3" value="雑誌" />雑誌</label></li>
					<li><label for="media4"><input type="checkbox" name="media" id="media4" value="その他" />その他</label></li>
				</ul>
			</div>
		</div>
		<div class="form-group">
			<label>上記が「その他」の場合</label>
			<input class="form-control" type="text" name="otherValue" id="otherValue" size="50" />
		</div>		
		<div class="btns form-inline">
			<button type="submit" class="btn btn-primary">この内容で登録する</button>
			<button type="reset" class="btn btn-default">クリア</button>
		</div>
		  
	</form>
 			
ページトップへ戻る