Validator

新規会員登録

	<form role="form">

			<div id="title">
				<img class="img-responsive" src="images/regist_title.png" alt="新規会員登録" />
			</div>
		
			<div class="form-group">
				<label for="inputName">Name</label>
				<input class="form-control" id="inputName" name="name" type="text" placeholder="Enter name" required>
				<p class="help-block"></p>
			</div>
			<div class="form-group">
				<label for="inputPhone">Age</label>
				<input class="form-control" id="inputPhone" name="number" type="number" max="100" min="1" placeholder="Enter age" required>
				<p class="help-block"></p>
			</div>
			<div class="form-group">
				<label for="inputEmail">Email</label>
				<input class="form-control" id="inputEmail" name="email" type="email" placeholder="Enter Email" required>
				<p class="help-block"></p>
			</div>
			<div class="form-group">
				<label for="inputPassword">Password</label>
				<input class="form-control" id="inputPassword" name="password" type="password" minlength="6" placeholder="Enter password" required>
				<p class="help-block"></p>
			</div>
			<div class="form-group">
				<label class="checkbox-inline">
					<input id="agreed" name="agreed" type="checkbox" required> Agree to the <a href="javascript:void(0);">User Agreement</a>
				</label>
				<p class="help-block"></p>
			</div>
			<div class="btns form-inline">
				<button type="submit" class="btn btn-primary">この内容で登録する</button>
				<button type="reset" class="btn btn-default">クリア</button>
             </div>
		
		</form>
			
$.fn.validator.setDefaults({
    trigger: 'input change',
    success: function (e) {
      console.log(e.type, e.value, e.rule);
      $(this).closest('.form-group').removeClass('has-error').find('.help-block').empty();
    },
    error: function (e) {
      console.log(e.type, e.value, e.rule);
      $(this).closest('.form-group').addClass('has-error').find('.help-block').text(e.message);
    }
  });

  var $form = $('.container form');
  var $inputs = $form.find('input');
  var $submit = $form.find(':submit');

  $inputs.validator();

  $submit.click(function (e) {
    var validity = [];

    $inputs.each(function () {
      validity.push($(this).validator('isValid'));
    });

    if ($.inArray(false, validity) !== -1) {
      e.preventDefault();
      return false;
    }
  });
          	
ページトップへ戻る