12/08/2018, 14:57

jQuery Form Validator in Rails

Khi có thay đổi dữ liệu, bạn luôn cần xác nhận nó trước khi chấp nhận để nó sẽ không tạo ra bất kỳ lỗi nào trong quá trình xử lý. Việc validate back-end là việc cần thiết bắt buộc phải có. Tuy nhiên bạn có thể dùng thêm validate front-end để kiểm tra trước dữ liệu. Bài viết này sẽ giới thiệu về các ...

Khi có thay đổi dữ liệu, bạn luôn cần xác nhận nó trước khi chấp nhận để nó sẽ không tạo ra bất kỳ lỗi nào trong quá trình xử lý. Việc validate back-end là việc cần thiết bắt buộc phải có. Tuy nhiên bạn có thể dùng thêm validate front-end để kiểm tra trước dữ liệu. Bài viết này sẽ giới thiệu về các sử dụng jQuery Form Validator trong Rails, mot plug in jQuery dùng để validate form.

Installation

Thêm vào Gemfile

gem 'jquery-form-validator-rails'

Run bundle íntall

Include jquery.form-validator-rails vào application.js

//= require jquery.form-validator

Cách sử dụng

Trước tiên cần có form để validate

<form action="" id="registration-form">
  <p>
    E-mail
    <input name="email" data-validation="email">
  </p>
  <p>
    User name
    <input name="user" data-validation="length alphanumeric"
     data-validation-length="3-12"
     data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)">
  </p>
  <p>
    Password
    <input name="pass_confirmation" data-validation="strength"
     data-validation-strength="2">
  </p>
  <p>
    Birth date
    <input name="birth" data-validation="birthdate"
     data-validation-help="yyyy-mm-dd">
  </p>
</form>

Cách khai báo validate ở đây dùng data-validation cộng với kiểu validate. vd: data-validation="email" data-validation="birthdate". Còn điều kiện validate sẽ là data-validation-{tên kiểu validate}. VD : data-validation-length="3-12" (validate độ dài từ 3 đến 12).

Gọi validate function của jquery form validate

<script>
  $.validate({
      modules : 'security date'
  });
</script>

Với một số kiểu validate cần phải gọi thêm module trong javascript. Ví dụ trên dùng thêm module security cho validate strength và module date cho validate birthdate Có thể tìm hiểu thêm về các validate khác ở đây jQuery Form Validate

0