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