HTML - CSS - JS31 . 07 . 2021Lượt xem: 775

Hướng dẫn Validate form bằng Jquery – bài 2

Trong bài một, tôi đã hướng dẫn các validate form bằng data attribute, còn bài này tôi sẽ khai báo rule và message trong javascript.

Để xem cách cài đặt thì bạn hãy xem bài 1: Tại đây

Xem demo: Tại đây

Tôi có 1 form mẫu như sau:

<form action="" class="form-2">
        <h2>FORM 2</h2>
        <div class="form-control">
            <div class="label">
              <label for="">Full name</label>
            </div>
            <div class="action">
              <input type="text" name="fullname">
            </div>
        </div>
        <div class="form-control">
            <div class="label">
              <label for="">Email</label>
            </div>
            <div class="action">
              <input type="email" name="email">
            </div>
        </div>
        <div class="form-control">
            <div class="label">
              <label for="">Phone</label>
            </div>
            <div class="action">
              <input type="text" name="phone">
            </div>
        </div>
        <div class="form-control">
            <div class="label">
              <label for="">Message</label>
            </div>
            <div class="action">
              <textarea name="message" id="" cols="30" rows="5"></textarea>
            </div>
        </div>
        <div class="form-control">
            <button type="submit">Send</button>
        </div>
      </form>

Bắt đầu validate form này, nếu bạn chưa thêm source của jquery validation thì vui lòng xem trước bài 1.

Dưới dây là một số ví dụ cho form trên, tất nhiên sẽ có rất nhiều rule khác tôi sẽ giới thiệu thêm ở dưới

$(document).ready(function() {

      $(".form-2").validate({
        rules: {
          fullname: "required",
          email: {
            required: true,
            email: true
          },
          phone: {
            require: false,
            isPhone: true,
            minlength: 10 
          }
        },
        messages: {
          fullname: "Please enter your full name",
          email: {
            required: "Please enter your email",
            email: "Please enter a valid email"
          },
        }
      });
      $.validator.addMethod("isPhone", function (value, element) {
        if ( /^[0-9\-\(\)\/\+\s]*$/g.test(value)) {
            return true;
        } else {
            return false;
        };
      }, "Invalid phone number");
    });

Danh sách các rule đã có sẵn:

required : Bắt buộc nhập

ví dụ:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true
    }
  }
});

minlength : Số ký tự ít nhất phải có

ví dụ:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      minlength: 3
    }
  }
});

maxlength : Số ký tự tối đa

ví dụ:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      maxlength: 4
    }
  }
});

rangelength : Số ký tự chỉ trong phạm vi cho phép

ví dụ:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      rangelength: [2, 6]
    }
  }
});

min : Số nhỏ nhất

ví dụ:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      min: 13
    }
  }
});

max : Số lớp nhất

ví dụ:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      max: 99
    }
  }
});

range : Chỉ nhập số trong phạm vi cho phép

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      range: [13, 23]
    }
  }
});

step : Chỉ nhập theo yêu cầu nhất định

Ví dụ:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      step: 10
    }
  }
});

email : Loại input là email

Ví dụ:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

url : Loại input là url

Ví dụ:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});

date : Loại input là ngày

Ví dụ:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      date: true
    }
  }
});

dateISO : Loại input là ngày chuẩn ISO

Ví dụ:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      dateISO: true
    }
  }
});

number : Loại input là số thập phân

Ví dụ:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});

digits : Loại input là số

Ví dụ:

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      digits: true
    }
  }
});

equalTo : Yêu cầu phải nhập giống với input khác

Ví dụ:

$( "#myform" ).validate({
  rules: {
    password: "required",
    password_again: {
      equalTo: "#password"
    }
  }
});

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

Xem thêm: