CODEWITHSUNDEEP
jqueryhtml
Learner Miz
Learner Miz

Reputation: 17

Why my html5 is not working when I use jquery in my page?

here is my code. And I am trying to validate the form using html5.

<!DOCTYPE HTML>
<html>
<head>
    <title>Info</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div class="body" style="width:500px; margin:auto;">

    <div class="mainform" style="display:block;">
            Step 1 :
            <form id="info" action="" method="post">
    <fieldset> 
        <?php /*?><legend>Your Details</legend><?php */?>
        <ol>
            <li>
                <label for="name">Name</label>
                <input id="name" name="name" type="text" placeholder="Enter Full Name" required autofocus />
            </li>
            <li>
                <label for="email">Email</label>
                <input id="email" name="email" type="email" placeholder="[email protected]" required />
            </li>

            <li>
                <label for="address">Address</label>
                <textarea id="address" name="address" rows=5 required /></textarea>
            </li>

            <li>
                <label for="zip">Zip Code</label>
                <select name="zip" id="zip" required>
                    <option value="">Select Zip Code</option>
                    <option value="4333">4333</option>
                    <option value="4334">4334</option>
                    <option value="4335">4335</option>
                    <option value="4336">4336</option>
                    <option value="4337">4337</option>
                </select>
            </li>

            <li>
                <label for="gender">Gender</label>
                <select name="gender" id="gender" required>
                    <option value="">Select Gender</option>
                    <option value="m">Male</option>
                    <option value="f">Female</option>
                </select>
            </li>

        </ol>
    </fieldset>
    <input id="sub" type="submit" name="sub" value="submit" />
    <input type="reset" name="reset" value="reset" />
</form>
    </div>

    <div class="secondfrom" style="margin-top:20px; display:none;">
            Step 2 :
            <form action="" method="post" id="info">
            Please Enter Your Code<br />
            <input type="text" name="code" class="code" placeholder="Enter Your Code" /><br />
            <input id="codesubmit" type="submit" name="codesubmit" value="submit" />
            <input id="codeskip" type="button" name="skip" value="skip" />
            </form>
    </div>
    <script type="text/javascript">
    //$(document).ready(function() {

    //});
    </script>
    <div class="thirdfrom" style="margin-top:20px; display:none;">
            <form action="" method="post" id="info">
            Congratulation.Your code is successfully send<br />

            <input id="congratsub" type="submit" name="confirmsubmit" value="Proceed" />
            </form>
    </div>
</div>



</body>
</html>

It works as i expect i mean html5 validation. But whenever I add this jquery code to the page html5 validation is not working. Whats wrong ?

<script type="text/javascript">
    $(document).ready(function() {
      $("#sub").click(function() { 
         $('.mainform').hide(); 
          $('.thirdfrom').hide(); 
         $('.secondfrom').show(); 
        });

        $("#codesubmit").click(function() { 
         $('.mainform').hide(); 
         $('.secondfrom').hide(); 
         $('.thirdfrom').show();
         return false;

        });
    });     
    </script>

Upvotes: 0

Views: 164

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075925

In the click handler you're attaching to the codesubmit submit button, you're doing return false. That prevents the default action of the button, which is to (attempt to) submit the form. Since you haven't tried to submit the form, the browser isn't doing validation.

If you want to prevent the submission but still do the validity check, you can call checkValidity on the form's DOM element on some browsers.

Upvotes: 1

Related Questions