Мастер форм Jquery - обязательные группы переключателей

Question

Я хотел бы создать форму, которая состоит из 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>