Validate form sử dụng BootstrapValidator cho website Asp.Net

Validate form cho website có rất nhiều plugin jquery hỗ trợ. Nhưng với những ai đang sử dụng bootstrap thì theo mình nghĩ dùng BootstrapValidator là hay nhất vì nó "đồng bộ" và có tính tùy biến khá cao. Và đặc biệt tác giả là Nguyen Huu Phuoc, một người Việt Nam nhé.

- Các bạn có thể download jquery plugin này trực tiếp tại trang http://bootstrapvalidator.com/

1. Chuẩn bị.

- Vì bootstrapvalidator là plugin hỗ trợ cho bootstrap, nên các bạn sẽ phải download cả bootstrap về nữa. Sau khi download và giải nén vào project các bạn có như sau.

2. Sử dụng bootstrapvalidator trong Asp.net

- Ở bài này chủ yếu mình muốn đề cập đến việc tích hợp vào website Asp.net, vì  với những website phát triển bằng PHP các bạn chỉ cần làm y hệt các ví dụ đưa ra ở trang http://bootstrapvalidator.com là chạy ngon lành. Nhưng với website phát triển bằng Asp.Net khi tích hợp vào các bạn sẽ gặp một số vấn đề... và mình đã mất đến 3-4 hôm mới có thể cho nó chạy được :))

- Trước tiên các bạn tạo 1 trang MastePage, ở phần head thêm thư viện css và javascript như sau.

<head runat="server">
     <title>Demo BootstrapValidation for Asp.Net</title>
    <%--css--%>
    <link href="bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrapvalidator-dist-0.5.0/dist/css/bootstrapValidator.min.css" rel="stylesheet" />
    <%--javascript--%>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
    <script src="bootstrapvalidator-dist-0.5.0/dist/js/bootstrapValidator.min.js"></script>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

- Trong ví dụ này mình tạo một form ở trang SampleValidator.aspx chạy theo MastePage tạo trước ở trên.

HTML

<div class="form-horizontal" id="formValidator">
        <div class="form-group">
            <label class="col-lg-3 control-label">Username</label>
            <div class="col-lg-6">
                <asp:TextBox ID="txtUserName" runat="server" CssClass="form-control"></asp:TextBox>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-3 control-label">Email address</label>
            <div class="col-lg-6">
                <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control"></asp:TextBox>
            </div>
        </div>
        <div class="form-group">
            <div class="col-lg-3"></div>
            <div class="col-lg-6">
                <asp:LinkButton ID="btnSave" CssClass="lbtSubmit btn btn-primary" runat="server" OnClick="btnSave_Click">Submit</asp:LinkButton>
                <%--message return from sever side--%>
                <asp:Literal ID="ltrMs" runat="server"></asp:Literal>
            </div>
        </div>
    </div>

Javascript:

 <script>
        $(document).ready(function () {
            $('#formValidator').bootstrapValidator({
				 submitButtons: '<%=btnSave.ClientID%>',
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    <%= txtUserName.UniqueID %>: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: 'The username is required and cannot be empty'
                            },
                            stringLength: {
                                min: 6,
                                max: 30,
                                message: 'The username must be more than 6 and less than 30 characters long'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_]+$/,
                                message: 'The username can only consist of alphabetical, number and underscore'
                            }
                        }
                    },
                    <%= txtEmail.UniqueID %>: {
                        validators: {
                            notEmpty: {
                                message: 'The email is required and cannot be empty'
                            },
                            emailAddress: {
                                message: 'The input is not a valid email address'
                            }
                        }
                    }
                }
            });

          //validation manually
		  $('#<%=btnSave.ClientID%>').click(function(){
			var validatorObj = $('#formValidator').data('bootstrapValidator');
			validatorObj.validate();
			return validatorObj.isValid(); 
		  });

        });
    </script>

- Ở đây để chỉ định các control asp.net cần validate, chúng ta sử dụng khai báo: <%= txtEmail.UniqueID %> (Ở đây là chỉ định cho asp:texbox có Id=txtEmail), các điều kiện cần kiểm tra như không cho phép trống, địa chỉ mail, giới hạn ký tự nhập.... các bạn tham khảo chi tiết hơn ở các ví dụ trên trang http://bootstrapvalidator.com/

3. AddField Dynamic

- Trong một số trường hợp trên form của các bạn sẽ có thêm tùy chọn thêm hoặc bớt một vài trường thông tin ví dụ như "Tên gọi", "Tên bí danh".... Khi đó sẽ phát sinh yêu cầu cần kiểm tra tính hợp lệ của các trường thông tin dynamic đó.

- Để thêm validate cho một input ta có thể dùng đoạn code dưới đây

$('#formValidator').bootstrapValidator('addField', $('.txtUserName2'), {
                        validators: {
                            notEmpty: {
                                message: 'The username2 is required and cannot be empty'
                            }
                        }
                    });

- Để gỡ bỏ validate cho một input ta dùng đoạn code dưới đây

//remove validate
 $('#formValidator').bootstrapValidator('removeField', $('.txtUserName2'));

- Các bạn có thể download ví dụ đính kèm ở cuối bài viết để hiểu rõ hơn

Download Source

Related Post


Sử dụng Popover Boostrap hiện thị thông tin chú thích dạng tooltip
Friday, August 1, 2014
Popover Boostrap là một dạng tooltip trong Bootstrap hỗ trợ hiện thị thông tin ghi chú khá đẹp, không chỉ hỗ trợ hiện thị nội dung dưới dạng text mà còn cho phép hiện thị nội dung với cấu trúc html phức tạp mang lại hiệu quả và tính thẩm mỹ cao trong phát triển layout website.
Một số thủ thuật nhỏ trong phát triển layout bằng bootstrap
Monday, May 26, 2014
Bài này mình muốn giới thiệu một số thủ thuật nhỏ mình rút kinh nghiệm được trong quá trình sử dụng bootstrap để phát triển layout, tuy chỉ là những đoạn code nhỏ nhưng nếu không biết có thể mất khá nhiều thời gian để lục lọi trên google giống như mình
Search

Đăng ký nhận bài mới


Category

Blog Archive