KIỂM TRA FORM VỚI JQUERY VALIDATE

Cảm hứng để viết bài bác này xuất phát điểm từ một vụ việc mình gặp phải khi làm project. Khi validate form từ phía server, những lần submit size thì sẽ download lại trang, nếu thao tác với popup thì các lần như vậy popup sẽ không hiển thị lên nữa; với giải giáp cho vấn đề này đó là validate khung ở client, cần sử dụng jQuery Validation Plugin.

Bước 1: tải về thư viện Jquery

Bạn cần phải có thư viện gốc jquery để rất có thể sử dụng JQuery Validation.

Bạn rất có thể download tủ sách tại:https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js

Bước 2: download thư viện Jquery Validation

Bạn có thể download tủ sách này tại:https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js

Bước 3: tạo form HTML

div class="container"> div class="row centered-form"> div class="col-xs-12 col-sm-8 col-md-4 col-sm-offset-2 col-md-offset-4"> div class="panel panel-default"> div class="panel-heading"> h3 class="panel-title">Sign Uph3> div> div class="panel-body"> size role="form" name="registration"> div class="row"> div class="col-xs-6 col-sm-6 col-md-6"> div class="form-group"> input đầu vào type="text" name="firstname" id="firstname" class="form-control input-sm" placeholder="First Name"> div> div> div class="col-xs-6 col-sm-6 col-md-6"> div class="form-group"> input đầu vào type="text" name="lastname" id="lastname" class="form-control input-sm" placeholder="Last Name"> div> div> div> div class="form-group"> input type="email" name="email" id="email" class="form-control input-sm" placeholder="Email Address"> div> div class="row"> div class="col-xs-6 col-sm-6 col-md-6"> div class="form-group"> input type="password" name="password" id="password" class="form-control input-sm" placeholder="Password"> div> div> div class="col-xs-6 col-sm-6 col-md-6"> div class="form-group"> đầu vào type="password" name="password_confirmation" id="password_confirmation" class="form-control input-sm" placeholder="Confirm Password"> div> div> div> input type="submit" value="Register" class="btn btn-info btn-block"> form> div> div> div> div>div>

Bước 4: bắt đầu làm với Jquery validation

Ngay bây giờ, họ sẽ bắt tay vào thao tác với JQuery Validation.Giả sử yêu cầu xác thực tin tức là: họ, thương hiệu bắt buộc; email bắt buộc và cần đúng định dạng; password với password confirm phải và có độ dài bé bỏng nhất là 5.Đoạn js của bọn họ sẽ như sau:

Chúng ta cũng hoàn toàn có thể custom rule nếu như rule đó không có sẵn:

$.validator.addMethod("validatePassword", function (value, element) , "Hãy nhập password trường đoản cú 8 đến 16 ký tự bao hàm chữ hoa, chữ thường xuyên và ít nhất một chữ số"); nếu muốn validate với một quý hiếm của một element khác, vào rule "validatePassword" thay do là true, ta truyền vào id của element đề xuất so sánh.

validatePassword: "#re-password",Bạn cũng hoàn toàn có thể tùy vươn lên là vị trí hiển thị message bởi option errorPlacement:

errorPlacement: function(error, element) if (element.attr("name") == "password") error.insertAfter("#password"); else error.insertAfter(element);

Tổng kết

Vậy là họ đã gồm một ví dụ đơn giản và dễ dàng về cách thao tác làm việc với JQuery Validation, đấy là một plugin rất gọn nhẹ dứt thực sự hữu dụng trong validate client site. Hy vọng đã mang lại cho mọi người một nội dung bài viết hữu ích. Tư liệu tham khảo:https://jqueryvalidation.org/https://techblog.vn/tim-hieu-jquery-validation-qua-vi-du-co-ban