jQuery Validation Plugin Demo

引用路徑

<script type="text/javascript" src="http://js.mobi.net.tw/jquery-1.10.1.min.js"></script><!-- jQuery library若原先網頁已經有此程式則不必再次引入 -->
<!-- 驗證↓ -->
<script type="text/javascript" src="http://js.mobi.net.tw/jquery-validation-1.13.1/dist/jquery.validate.js"></script>
<script type="text/javascript" src="http://js.mobi.net.tw/jquery-validation-1.13.1/dist/localization/messages_zh_TW.js"></script><!-- 語系包 -->
<!-- 驗證↑ -->

JavaScript

<script type="text/javascript">
/*如果需要偵測送出後動作
$.validator.setDefaults({
    submitHandler: function() {
        alert("submitted!");
    }
});
*/
$().ready(function() {
    // validate the comment form when it is submitted
    $("#jwuForm").validate();
});
</script>

使用

<!--<form action="upload.php" method="post" enctype="multipart/form-data" id="jwuForm">--><!--如果有檔案上傳-->

<form method="post" action="" id="jwuForm">

    <label for="cname">*姓名 (至少2個字)</label>
    <input id="cname" name="name" minlength="2" type="text" required />

    <label for="cemail">*E-Mail</label>
    <input id="cemail" type="email" name="email" required />

    <input class="submit" type="submit" value="送出">
    <input type="reset" value="重填">
</form>

Default submitHandler is set to display an alert into of submitting the form

Please provide your name, email address (won't be published) and a comment

Validating a complete form

Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo

Synthetic examples

Real-world examples

Testsuite