Question

在我的html页面中，我有一个表单，其中包含一系列标记为“必需”的字段。如果有人忘记选择一个选项并点击提交，则会告诉他们必须填写表单。但是，当我添加jquery hide（）和show（）时，将忽略required属性并单击该按钮会自动显示下一个div，无论表单是否已填写。任何建议都将不胜感激。

的HTML / jquery的：

<script>
        $(document).ready(function(){

            $("#ChatFormat").hide();
            //$("#QuestSubmit").bind(("click",function(){
            $("#QuestSubmit").click(function(){
                $("#ChatFormat").show();
                $("#QuestFormat").hide();
            });
        });
    </script>

</head>

<body>
    <div class="wrapper" id="QuestFormat">
        <div id="menu">
            <div style="clear:both"></div>
        </div>  
        <div class="container" id="chatbox">
            <form  id = "IntroQuest">
                <h4>Please take a moment to answer a few quick questions. &nbsp;&nbsp;Thank you.</h4>
                <h4>What is your gender?
                    <select id = "Gender" required>
                        <option value selected>-Select-</option>
                        <option value = "Male">Male</option>
                        <option value = "Female">Female</option>
                    </select>
                </h4>
                <h4>What is your ethnicity?
                    <select id = "Ethnicity" required>
                        <option value selected>-Select-</option>
                        <option value = "Caucasian">Caucasian</option>
                        <option value = "Hispanic/Latino">Hispanic / Latino</option>
                        <option value = "Asian">Asian</option>
                        <option value = "MiddleEastern">Middle Eastern</option>
                        <option value = "PacificIslander">Pacific Islander</option>
                        <option value = "NativeAmerican">Native American</option>
                        <option value = "Other">Other</option>
                    </select>

                <input class = "submitbutton" id = "QuestSubmit" type = "submit" value = "Begin Chat">
            </form>
        </div>

    </div>

    <div class="wrapper" id="ChatFormat">
        <div id="menu">
            <div style="clear:both"></div>
        </div>  
        <div class="container" id ="chatbox"></div>

        <form name="message" action="">

            <input id="input" class="bottom" name="usermsg" type="text" id="usermsg" size="63" />
            <input class="submitbutton"  name="submitmsg" type="submit"  id="submitmsg" value="Send" />

        </form>
    </div>
</body>

Answer 1

click处理程序与表单无关。目前你的代码说，当点击元素#QuestSubmit做一些事情时。不是，当提交表单#IntroQuest时，请执行某些操作。

所以你应该可以通过改变来修复它：

$("#QuestSubmit").click(function(){

为：

$("#IntroQuest").on("submit", function(){

Answer 2

在进行下一步之前，先在其中放一些简单的逻辑。见下文。

http://jsfiddle.net/hSHaE/

<body>
    <div class="wrapper" id="QuestFormat">
        <div id="menu">
            <div style="clear:both"></div>
        </div>  
        <div class="container" id="chatbox">
            <!-- You need to have this form actually do something or it will throw a "Please use POST request" error at the end -->
            <form  id = "IntroQuest"> 
                <h4>Please take a moment to answer a few quick questions. &nbsp;&nbsp;Thank you.</h4>
                <h4>What is your gender?
                    <select id = "Gender" required>
                        <option value = "" selected>-Select-</option>
                        <option value = "Male">Male</option>
                        <option value = "Female">Female</option>
                    </select>
                </h4>
                <h4>What is your ethnicity?
                    <select id = "Ethnicity" required>
                        <option value = "" selected>-Select-</option>
                        <option value = "Caucasian">Caucasian</option>
                        <option value = "Hispanic/Latino">Hispanic / Latino</option>
                        <option value = "Asian">Asian</option>
                        <option value = "MiddleEastern">Middle Eastern</option>
                        <option value = "PacificIslander">Pacific Islander</option>
                        <option value = "NativeAmerican">Native American</option>
                        <option value = "Other">Other</option>
                    </select>
                    <span id="errorMessage" style="display:hidden;color:red"></span>
                <input class = "submitbutton" id = "QuestSubmit" type = "submit" value = "Begin Chat">
            </form>
        </div>

    </div>

    <div class="wrapper" id="ChatFormat">
        <div id="menu">
            <div style="clear:both"></div>
        </div>  
        <div class="container" id ="chatbox"></div>

        <form name="message" action="">

            <input id="input" class="bottom" name="usermsg" type="text" id="usermsg" size="63" />
            <input class="submitbutton"  name="submitmsg" type="submit"  id="submitmsg" value="Send" />

        </form>
    </div>
</body>

以下是jquery：

        $(document).ready(function(){

            $("#ChatFormat").hide();
            //$("#QuestSubmit").bind(("click",function(){
            $("#QuestSubmit").click(function(){
                if($("#Ethnicity").val() == "" || $("#Gender").val() == "")
                {
                    $("#errorMessage").html("Please fill out all fields and try again.").show();
                }
                else
                {
                    $("#errorMessage").hide();
                    $("#ChatFormat").show();
                    $("#QuestFormat").hide();
                }
            });
        });

希望有所帮助。如果这样做，请将此标记为答案。

插入jquery后，我的表单中的必需属性将被忽略

2 个答案: