form validator

新規会員登録

は必須項目です

   jQuery(document).ready(function() {
   
   window.validator = new FormValidator('#form');
	validator.config([
		//name
		{
			selector: '[name="name"]',
			name: 'お名前',
			required: true,
			error: function() {
				this.$element.closest('.form-group').addClass('has-error');
			},
			success: function() {
				this.$element.closest('.form-group').removeClass('has-error');
			},
		},
		//furigana
		{
			selector: '[name="furi"]',
			name: 'フリガナ',
			required: true,
			error: function() {
				this.$element.closest('.form-group').addClass('has-error');
			},
			success: function() {
				this.$element.closest('.form-group').removeClass('has-error');
			},
		},
		//email
		{
			selector: '[name="mail"]',
			name: 'メールアドレス',
			required: true,
			match: new RegExp("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$","g"),
			error: function() {
				this.$element.closest('.form-group').addClass('has-error');
			},
			success: function() {
				this.$element.closest('.form-group').removeClass('has-error');
			},
		},
		//email
		{
			selector: '[name="mailConfirm"]',
			name: 'メールアドレス確認',
			required: true,
			sameAs: '[name="mail"]',
			match: new RegExp("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$","g"),
			error: function() {
				this.$element.closest('.form-group').addClass('has-error');
			},
			success: function() {
				this.$element.closest('.form-group').removeClass('has-error');
			},
		},
		//お問い合わせ内容
		{
			selector: '[name="content"]',
			name: 'お問い合わせ内容',
			required: true,
			error: function() {
				this.$element.closest('.form-group').addClass('has-error');
			},
			success: function() {
				this.$element.closest('.form-group').removeClass('has-error');
			},
		}
		]);
		//validate begins
		$('#form').submit(function(){
			if (validator.submit()) // all legal
				return true;

		//something illegal, output error messages
			$('.register-alert').empty();
			validator.errorMsgs.forEach(function(obj){

			// customize error message
				if (obj.name == 'Password again' && obj.attribute == 'sameAs') {
					obj.msg = obj.msg + ' as password';
				}

				var $err = $('

'+obj.msg+'

') $('.register-alert').append($err); }) $('.register-alert').removeClass('hidden'); $('#showerror').click(); window.scrollTo(0, 1); return false; }) //form submit });
<div id="contents">

	<div id="title">
		<h2><img src="images/regist_title.gif" width="160" height="45" alt="新規会員登録" /></h2>
		<p class="note"><span class="require">※</span>は必須項目です</p>
	</div>

	<div class="alert alert-danger register-alert hidden" role="alert"></div>

    <form method="post" action="" class="form-horizontal" id="form">

 <div class="form-group has-feedback">
	<label class="control-label" for="name">お名前<span class="require">※</span></label>
		<input class="form-control" type="text" id="name" name="name" placeholder='お名前' >
</div>
 <div class="form-group has-feedback">
	<label class="control-label" for="furi">フリガナ<span class="require">※</span></label>
		<input class="form-control" type="text" id="furi" name="furi" placeholder='フリガナ'>
</div>
 <div class="form-group has-feedback">
	<label class="control-label" for="mail1">メールアドレス<span class="require">※</span></label>
		<input class="form-control" id="mail" name="mail" type="email" id="mail" placeholder='Email address'>
</div>
 <div class="form-group has-feedback">
	<label class="control-label" for="mail1">メールアドレス確認<span class="require">※</span></label>
		<input class="form-control" id="mailConfirm" name="mailConfirm" type="email" id="mailConfirm" placeholder='Email address'>
</div>
 <div class="form-group">
  	<label class="control-label" for="job">職業</label>
		<select name="job" id="job">
			<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">
	<ul class="col-sm-2">
		<label class="control-label">どこで知りましたか</label>
    </ul>
   <ul id="media" class="col-sm-10">
		<li class="checkbox"><label for="media1"><input type="checkbox" name="media" id="media1" value="検索サイト" />検索サイト</label></li>
		<li class="checkbox"><label for="media2"><input type="checkbox" name="media" id="media2" value="郵送パンフレット" />郵送パンフレット</label></li>
		<li class="checkbox"><label for="media3"><input type="checkbox" name="media" id="media3" value="知人の紹介" />知人の紹介</label></li>
		<li class="checkbox"><label for="media4"><input type="checkbox" name="media" id="media4" value="その他" />その他</label></li>
    </ul>
  </div>
  <div class="form-group">
	<div class="col-sm-3">
		<label class="control-label" for="content">お問い合わせ内容<span class="require"> ※</span></label>
    </div>
	<div class="col-sm-9">
      <textarea class="form-control" name="content" id="content" cols="30" rows="5" class="full"></textarea>
    </div>
  </div>
  <div class="btns form-inline">
		<button type="submit" class="btn btn-primary">この内容で登録する</button>
		<button type="reset" class="btn btn-default">クリア</button>
  </div>
  </div>
 </form>
</div>
			
ページトップへ戻る