Question

这是我的代码。我正在尝试使用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="example@domain.com" 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>

它的工作原理我希望我的意思是html5验证。但每当我将这个jquery代码添加到页面html5验证不起作用。怎么了？

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

Answer 1

在您click提交按钮附加的codesubmit处理程序中，您正在执行return false。这会阻止按钮的默认操作，即（尝试）提交表单。由于您尚未尝试提交表单，因此浏览器未进行验证。

如果您想阻止提交但仍然进行有效性检查，可以在某些浏览器上调用表单的DOM元素上的checkValidity。

当我在页面中使用jquery时，为什么我的html5无效？

1 个答案: