Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <!-- jQuery v1.9.1 -->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- jQuery Validation v1.17.0 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
</head>
<body>
    <form id="form">
        <p>
            <label for="name">Name*</label>
            <input id="name" name="name" type="text" required />
        </p>
        <p>
            <label for="age">Age</label>
            <input id="age" name="age" type="text" />
        </p>
        <!-- 
            屬性設定[註1]
            required: 必填項目
        -->
        <hr />
        <input class="submit" type="submit" value="Submit">
    </form>
    <style>
        .error {
            /* 當格式錯誤時，則新增此類別 */
            border-color: red !important
        }
    </style>
    <script>
        $( "#form" ).validate({
            // 函式設定[註2]
            errorPlacement: function( error, element ) {
                return true;
            }
        });
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hsuehmingfangpro
0viewers