jQueryのステップ式問い合わせフォームについてです。
https://github.com/rstaib/jquery-steps
やりたいこと
step1に選択肢1、選択肢2のラジオボタンがあり、どちらかをクリックすると
step2へ遷移するようにしたいです。
こういったことはできるのでしょうか?
現状、「次の項目へ」のクリックでstep2へ遷移しますが、これをやめたいです。
使用中のライブラリ
jquery-2.2.4.min.js
jquery.validate.min.js
jquery.cookie-1.3.1.js
jquery.steps.js
現状のソースコード
基本的なものを少しカスタマイズしただけです。
goToNextStepなどのMethodを活用してみましたが、うまくいきませんでした。
jQuery
1jQuery(function() { 2 (function ($){ 3 var form = $("#example-form"); 4 form.validate({ 5 errorPlacement: function errorPlacement(error, element) { element.before(error); }, 6 rules: { 7 confirm: { 8 required: true 9 } 10 }, 11 //エラーメッセージの設定 12 messages: { 13 confirm: { 14 required: '必須項目です' 15 }, 16 confirm1: { 17 required: '必須項目です' 18 } 19 }, 20 errorPlacement: function (err, elem) { 21 err.appendTo($('p.error')); 22 } 23 }); 24 form.children("div").steps({ 25 enablePagination:true, 26 enableKeyNavigation: true, 27 suppressPaginationOnFocus: false, 28 headerTag: "h3", 29 bodyTag: "section", 30 transitionEffect: "slideLeft", 31 labels: { 32 next: "次の項目へ", 33 previous: "前の項目へ", 34 finish: "次へ" }, 35 36 onStepChanging: function (event, currentIndex, newIndex) 37 { 38 form.validate().settings.ignore = ":disabled,:hidden"; 39 return form.valid(); 40 }, 41 onFinishing: function (event, currentIndex) 42 { 43 form.validate().settings.ignore = ":disabled"; 44 return form.valid(); 45 } 46 }); 47 })(jQuery); 48});
html
1<link rel="stylesheet" href="css/jquery.steps.css"> 2<script 3 src="https://code.jquery.com/jquery-2.2.4.min.js" 4 integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 5 crossorigin="anonymous"></script> 6<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> 7<script src="jquery.cookie-1.3.1.js"></script> 8<script src="jquery.steps.js"></script> 9 10 11<div class="content" style="background: #333;height: 100vh;display: flex;align-items: center; justify-content: center;"> 12<form id="example-form" action="#" style="width: 980px;"> 13 <div> 14 <h3>step</h3><!--step1--> 15 <section> 16 <label for="confirm1">選択肢1 17 <input id="confirm1" name="confirm" type="radio" class="wizard required"></label> 18 19 <label for="confirm2">選択肢2 20 <input id="confirm2" name="confirm" type="radio" class="wizard required"></label> 21 22 <p class="error"></p> 23 </section> 24 <h3>step</h3><!--step2--> 25 <section> 26 <label for="confirm3">選択肢3 27 <input id="confirm3" name="confirm1" type="radio" class="wizard required"></label> 28 29 <label for="confirm4">選択肢4 30 <input id="confirm4" name="confirm1" type="radio" class="wizard required"></label> 31 32 <p class="error"></p> 33 </section> 34 </div> 35 </form> 36</div>
発生しているエラー
エラーは特にありません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/15 08:45