※は必須項目です
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>