Jquery表单向导 - 必需的单选按钮组

Question

我想构建一个4-5步的表单，每一步都有2-3个强制/必需的单选按钮。

选择的按钮确定下一步，所有步骤最终都会导致单个确认步骤。我遇到的问题是按钮是强制性的：“第一步”提示选择，但后续步骤（例如，选择长发或短发），不会提示您选择长发或短发：< / p>

<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>