<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; } });