Kiểm Tra Thông Tin Form Với Bootstrap Validator

Kiểm Tra Thông Tin Form Với Bootstrap Validator

Thư viện Javascript Validator giúp bạn kiểm tra thông tin người dùng có nhập đúng hoặc chưa nhập dữ liệu trên Form website trước khi Submit lên server...

Tạo Push Notification Website Với Onesignal – Gửi Thông Báo Đến Người Dùng Giống Facebook
Custom Select Box CSS Only
Tích Hợp Live Chat Facebook Messenger Vào Website

Thư viện Javascript Validator giúp bạn kiểm tra thông tin người dùng có nhập đúng hoặc chưa nhập dữ liệu trên Form website trước khi Submit lên server, giúp giảm thiểu xử lý bắt lỗi cho server rất nhiều.

1. Giới thiệu về thư viện Bootstrap Validator

Thư viện Bootstrap Validator là sự kết hợp tuyệt vời giữa hai thư viện không thể thiếu hiện này trên 1 website chuyên nghiệp, đó là thư viện jQuery, Bootstrap.

Bootstrap Validator giúp bạn thể hiện sự chuyện nghiệp của website và mang đến sự thân thiện cho người dùng khí lướt web cũng như nhập thông tin trên 1 form.

2. Ví dụ về đơn giản Bootstrap Validator

Thêm xác nhận dữ liều vào các biểu mẫu của bạn đơn giản này.

Form Bootstrap Validator HTML

<form data-toggle="validator" role="form">
                <div class="form-group">
                    <label for="inputName" class="control-label">Họ và Tên</label>
                    <input type="text" class="form-control" data-error="Không được để trống!" id="inputName" placeholder="Jacksonit.org" required>
                    <div class="help-block with-errors"></div>
                </div>
                <div class="form-group has-feedback">
                    <label for="inputTwitter" class="control-label">Twitter</label>
                    <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="ovuinhi" required>
                    </div>
                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group">
                    <label for="inputEmail" class="control-label">Email</label>
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Địa chỉ email không hợp lệ!" required>
                    <div class="help-block with-errors"></div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="control-label">Password</label>
                    <div class="form-inline row">
                        <div class="form-group col-sm-6">
                            <input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
                            <div class="help-block">Tối thiểu 6 ký tự</div>
                        </div>
                        <div class="form-group col-sm-6">
                            <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Rất tiếc, Mật khẩu không khớp" placeholder="Nhập lại mật khẩu" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="radio">
                        <label><input type="radio" name="underwear" required>jacksonit.org</label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="underwear" required>ovuinhi.com</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="checkbox">
                        <label><input type="checkbox" id="terms" data-error="Bạn phải đồng ý với điều khoản của chúng tôi" required>Điều khoản</label>
                        <div class="help-block with-errors"></div>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>

Thư viện CSS bạn cần thêm vào trong thẻ HEAD của website:

<!-- Bootstrap core CSS -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Thư viện JS bạn cần thêm vào trên </boby>

<!-- Kiểm tra nếu website có rồi thì không phải thêm vào nhé -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>

3. Hướng dẫn sử dụng Bootstrap Validator

Có hai cách để kích hoạt thư viên validation để xác thực Form biểu mẫu, tùy theo trường hợp bạn có thể chọn một sử dụng chức năng bootstrap validation.

Cách 1: Tự động kích hoạt xác nhận biểu mẫu bằng cách thêm data-toggle = “validator” vào thể form của bạn. Giống như ví dự trên mình đã làm.

<form role="form" data-toggle="validator">
  ...
</form>

Cách 2: Dùng đoạn Javascript đề kích hoạt xác nhận biều mẫu. Những cách này bắt buộc bạn phải thêm một id cho thể form bạn muốn xác thực.

HTML:

<form role="form" id="myForm">
  ...
</form>

Javascript:

$('#myForm').validator();

Ưu điểm của cách này bạn có thể customer lại và dùng cho form submit bằng AJAX, mình sẻ hướng dẫn phía dưới cách customer này.

 

Bình Luận