Hướng dẫn validate form bằng Jquery – bài 1

Plugin jQuery Validation là một plugin tuyệt vời. Tôi sẽ hướng dẫn bạn sử dụng để bắt lỗi (validate) trong form của mình. Ưu điểm của plugin này là có thể bắt lỗi trực tiếp khi người dùng đang nhập text, nếu sai rule sẽ hiện thông báo lỗi gì bên dưới input đó như hình dưới.

Xem demo

Để sử dụng plugin này bạn cần có Jquery và Jquery Validation

1. Thêm thư viện vào dự án của bạn

Trước tiên hãy thêm core jquery vào project

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

Tiếp theo:

Thêm thư viện Jquery Validation

Tải về phiên bản mới nhất: tại đây và thêm vào project của mình file jquery.validate.js trong thư mục dist bạn vừa mới tải về.

2. Bắt đầu Validate

Có 2 cách để validate

Cách 1: Trực tiếp bằng data attribute trên tag input, select, textarea, ….

Đặt code sau vào tag head, sau 2 source js bạn đã thêm.

<script>
    $(document).ready(function() {

      $(".form-1").validate();

  </script>

Quy định: Rule

data-rule-[tên rule]=”true”

Dưới đây là một số ví dụ:

• Required – data-rule-required="true"
• Email – data-rule-email="true"
• Minimum Length = data-rule-minlength="6"

Quy định: hiển thị lỗi

data-msg-[tên rule]="The message you want."

Một số ví dụ:

• Required – data-msg-required="Trường này là bắt buộc."
• Email – data-msg-email="Vui lòng nhập email đúng."

HTML form:

Bạn hãy để ý tag input, thì bạn sẽ biết cách sử dụng như thế nào

<form action="" class="form-1">
        <h2>FORM 1</h2>
        <div class="form-control">
          <div class="label">
            <label for="">Username</label>
          </div>
          <div class="action">
            <input type="text" name="username" data-rule-required="true" data-rule-minlength="6" data-msg-required="Please enter Username.">
          </div>
        </div>
        <div class="form-control">
          <div class="label">
            <label for="">Password</label>
          </div>
          <div class="action">
            <input type="password" name="pass" data-rule-required="true" data-rule-maxlength="10">
          </div>
        </div>
        <div class="form-control">
          <div class="label">
            <label for="">Country</label>
          </div>
          <div class="action">
            <select name="country" data-rule-required="true">
              <option value="">Choose</option>
              <option value="vietnam">Vietnam</option>
              <option value="usa">USA</option>
              <option value="japan">Japan</option>
            </select>
          </div>
        </div>
        <div class="form-control">
          <button type="submit">Send</button>
        </div>
      </form>

Danh sách rule

Có nhiều loại rule khác để bạn có thể validate nhiều loại input khác nhau, theo nhu cầu của mình.

• data-rule-url=”true”
• data-rule-date=”true”
• data-rule-dateISO=”true”
• data-rule-number=”true”
• data-rule-digits=”true”
• data-rule-creditcard=”true”
• data-rule-minlength=”6”
• data-rule-maxlength=”24”
• data-rule-rangelength=”5,10”
• data-rule-min=”5”
• data-rule-max=”10”
• data-rule-range=”5,10”
• data-rule-equalto=”#password”
• data-rule-remote=”custom-validatation-endpoint.aspx”

Một số rule khác (chưa kiểm tra)

• data-rule-accept=””
• data-rule-bankaccountNL=”true”
• data-rule-bankorgiroaccountNL=”true”
• data-rule-bic=””
• data-rule-cifES=””
• data-rule-creditcardtypes=””
• data-rule-currency=””
• data-rule-dateITA=””
• data-rule-dateNL=””
• data-rule-extension=””
• data-rule-giroaccountNL=””
• data-rule-iban=””
• data-rule-integer=”true”
• data-rule-ipv4=”true”
• data-rule-ipv6=”true”
• data-rule-mobileNL=””
• data-rule-mobileUK=””
• data-rule-lettersonly=”true”
• data-rule-nieES=””
• data-rule-nifES=””
• data-rule-nowhitespace=”true”
• data-rule-pattern=””
• data-rule-phoneNL=”true”
• data-rule-phoneUK=”true”
• data-rule-phoneUS=”true”
• data-rule-phonesUK=”true”
• data-rule-postalcodeNL=”true”
• data-rule-postcodeUK=”true”
• data-rule-require_from_group=””
• data-rule-skip_or_fill_minimum=””
• data-rule-strippedminlength=””
• data-rule-time=””
• data-rule-time12h=””
• data-rule-url2=””
• data-rule-vinUS=””
• data-rule-zipcodeUS=”true”
• data-rule-ziprange=””

Xem bài 2: Tại đây

Chúc bạn thành công