0

これが私のコードです。そして、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>
4

1 に答える 1

1

送信ボタンにclickアタッチしているハンドラーでは、. これにより、ボタンのデフォルトのアクションであるフォームの送信 (試行) が妨げられます。フォームを送信しようとしていないため、ブラウザは検証を行っていません。codesubmitreturn false

送信を防ぎたいが有効性チェックを行いたい場合は、checkValidity一部のブラウザーでフォームの DOM 要素を呼び出すことができます。

于 2013-02-27T12:14:55.830 に答える