CODEWITHSUNDEEP
jqueryhtml
Yehuda Gutstein
Yehuda Gutstein

Reputation: 381

The required attribute in my form is ignored after inserting jquery

In my html page, I have a form with a series of fields that are marked as "required". If someone forgets to select an option and clicks submit, they are told they must complete the form. However, when I add the jquery hide() and show(), the required attribute is ignored and clicking on the button automatically shows the next div, regardless of whether or not the form has been filled out. Any suggestions would be greatly appreciated.

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>

Upvotes: 1

Views: 837

Answers (2)

Robert Hyatt
Robert Hyatt

Reputation: 791

Just put some simple logic in there before you do your next step. See below.

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>

and here is the jquery to go along with it:

        $(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();
                }
            });
        });

Hope that helps. If that did it for you, please mark this as the answer.

Upvotes: 1

tw16
tw16

Reputation: 29585

The click handler is irrelevant when it comes to the form. Currently your code says, when the element #QuestSubmit is clicked do something. Not, when the form #IntroQuest is submitted do something.

So you should be able to fix it by changing:

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

to:

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

Upvotes: 1

Related Questions