using jquery validation trong asp.net sử dụng visual studio 2010

bassisstance.de cung cấp 1 thự viện dùng để validation bao gồm 1 số đặc trưng:
Các phương thức validat cơ bản: email, số, ngày tháng, url, thẻ tín dụng...
Ẩn và hiện thông điệp lổi khi cần thiết.
Validate trên các sự kiện: Submit, Keyup, Blur.
Linh động trong vấn đề chỉ ra các quy luật kiểm chứng (rule).

jQuery Validation là plug-in dành cho client side với việc sử dụng version visual studio 2010 chúng ta có thể dể dàng viết code giao tiếp với html control

Cách sử dụng:
1. Tải thư viện về bao gồm: jQuery 1.4.2-min và jQuery Validation plug-in bỏ trong thư mục js.
2. Tạo 1 blank website sử dụng Visual Studio 2010 và add libraries vào website

    <title>Using jQuery Validation trong ASP.NET</title>

    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script src="js/jquery.validate.min.js" type="text/javascript"></script>

3. Thêm 2 controls textboxes: username và password, cuối cùng là 1 button submit

    <div>

        <p>

            Username:

            <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox></p>

        <p>

            Email:

            <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></p>

        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

    </div>

4. Add script enable validation cho trang asp.net

    <script type="text/javascript">

        $(document).ready(function () {

            $("#form1").validate({

                rules: {

                    txtUsername: {

                        required: true,

                        minlength: 5

                    },

                    txtEmail: {

                        required: true,

                        minlength: 5,

                        email: true

                    }

                }, messages: {

                    txtUsername: {

                        required: "* Required Field *",

                        minlength: "* Please enter atleast 5characters *"

                    },

                    txtEmail: {

                        required: "* Required Field *",

                        minlength: "* Please enter atleast 5 characters *"

                    }

                }

            });

        });

    </script>

Thử submit khi giá trị 2 trường là rỗng chúng ta sẻ thấy (mặc định):

Khi nhập sai email và số ký tự tối thiểu chưa đạt.

Thử submit khi giá trị 2 trường là rỗng chúng ta sẻ thấy (custom message)

have fun!

Reference