0

4〜5ステップのフォームを作成したいのですが、各ステップには2〜3個の必須/必須のラジオボタンがあります。

選択したボタンが次のステップを決定し、すべてのステップが最終的に単一の確認ステップにつながります。私が抱えている問題は、ボタンを必須にすることです。「最初の」ステップでは選択を求められますが、後続のステップ(たとえば、長い髪または短い髪を選択する)では、長い髪または短い髪から選択するように求められません。

<div id="fieldWrapper">
            <span class="step" id="first">
                <span class="font_normal_07em_black">Dog or Cat?</span><br />
                Dog: <input id="dog_or_cat" type="radio" class="link required" value="dog" name="goto" /><br />
                Cat: <input id="dog_or_cat" type="radio" class="link" value="cat" name="goto" />

                <br />
            </span>

                    <span id="cat" class="step">
                        <span class="font_normal_07em_black">Cat: long or short hair?</span><br />
                        Long: <input id="cat_long_or_short" type="radio" class="link required" value="cat_long" name="goto" /><br />
                        Short:<input id="cat_long_or_short" type="radio" class="link" value="cat_short" name="goto" />  
                    </span>

                            <span id="cat_short" class="step">
                            <span class="font_normal_07em_black">Cat: Short Hair</span><br />
                            <input type="hidden" class="link" value="confirmation" />
                            </span>

                            <span id="cat_long" class="step">
                            <span class="font_normal_07em_black">Cat: Long Hair</span><br />
                            <input type="hidden" class="link" value="confirmation" />
                            </span>



                    <span id="dog" class="step">
                        <span class="font_normal_07em_black">Dog: Large or Small?</span><br />
                        Large: <input id="dog_large_or_small" type="radio" class="link required" value="dog_large" name="goto" /><br />
                        Small: <input id="dog_large_or_small" type="radio" class="link" value="dog_small" name="goto" />    
                    </span>


                            <span id="dog_large" class="step">
                            <span class="font_normal_07em_black">Dog: Large</span><br />
                            <input type="hidden" class="link" value="confirmation" />
                            </span>

                            <span id="dog_small" class="step">
                            <span class="font_normal_07em_black">Dog: Small</span><br />
                            <input type="hidden" class="link" value="confirmation" />
                            </span>


            </span>




            <span id="confirmation" class="step">
                <span class="font_normal_07em_black">Confirmation</span><br />
            </span>


            </div>
            <div id="demoNavigation">                           
                <input class="navigation_button" id="back" value="Back" type="reset" />
                <input class="navigation_button" id="next" value="Next" type="submit" />
            </div>
        </form>
        <hr />

        <p id="data"></p>
    </div>
4

0 に答える 0