Hướng dẫn dùng setcustomvalidity JavaScript

Question

Using jQuery you could do the following:

Nội dung chính Show

Một vài ràng buộc phổ biến
Quá trình validate dữ liệu
Can thiệp vào quá trình validate bằng bộ Validation API
Giới hạn file size khi upload
Hiển thị validation

$('#numberinput').get(0).setCustomValidity('The two email addresses must match.');

And not:

$('#numberinput').val("").setCustomValidity('The two email addresses must match.');

Bạn có thể yêu cầu các trường biểu mẫu cụ thể để người dùng của bạn không thể gửi biểu mẫu của bạn cho đến khi người đó điền họ.

Ví dụ: Nếu bạn muốn tạo trường nhập văn bản bắt buộc, bạn chỉ có thể thêm thuộc tính required trong phần tử input của bạn, như sau:

Dĩ nhiên là sau này chúng ta sẽ xử lý form bằng Javascript. Nhưng hiện tại chúng ta sử dụng HTML5 thuần túy.

Bài tập

Hãy nhập tạo một trường nhập văn bản bắt buộc để người dùng của bạn không thể gửi biểu mẫu mà không hoàn thành trường này.

Sau đó, hãy thử gửi biểu mẫu mà không cần nhập bất kỳ văn bản nào. Xem cách biểu mẫu HTML5 của bạn thông báo cho bạn rằng đây là trường là bắt buộc nhập?

Đăng ký tư vấn

Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký

Được cập nhật các ưu đãi sớm nhất

Hotline: 0383180086

Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội

Bài viết được sự cho phép của tác giả Lưu Bình An

Vì form quá phức tạp, chúng ta cần thêm một bài viết nữa về validation với html.

Với HTML5 chúng ta có một số kiểu input để validate những giá trị mà user đưa vào, ko cần tự viết javascript để check, chỉ đơn giản là khai báo mấy cái attribute, trường hợp phức tạp hơn, chúng ta có thể can thiệp trong cái Validation API để có kết quả mong muốn

Luôn nhớ validate ở phía client không có nghĩa là ko cần đến validate ở server.

Một vài ràng buộc phổ biến

Dùng kiểu input : bắt buộc là giá trị email : bắt buộc là giá trị url

Dùng attribute khác

AttributeKiểu input hỗ trợGiải thíchpatterntext, search, url, tel, email, passwordphải khớp với giá trị regular expression

<label for="FS">Select a file smaller than 75 kB : label>
<input type="file" id="FS">

0range, number, date, month, week, datetime, datetime-local, timegiá trị phải lớn hơn hoặc bằng giá trị

<label for="FS">Select a file smaller than 75 kB : label>
<input type="file" id="FS">

0

<label for="FS">Select a file smaller than 75 kB : label>
<input type="file" id="FS">

2range, number, date, month, week, datetime, datetime-local, timegiá trị phải nhỏ hơn hoặc bằng giá trị

<label for="FS">Select a file smaller than 75 kB : label>
<input type="file" id="FS">

2

<label for="FS">Select a file smaller than 75 kB : label>
<input type="file" id="FS">

4text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file, select, textareabắt buộc phải có giá trị

<label for="FS">Select a file smaller than 75 kB : label>
<input type="file" id="FS">

5text, search, url, tel, email, password, textareasố ký tự nhập vào phải thỏa lớn hơn hoặc bằng

<label for="FS">Select a file smaller than 75 kB : label>
<input type="file" id="FS">

5

<label for="FS">Select a file smaller than 75 kB : label>
<input type="file" id="FS">

7text, search, url, tel, email, password, textareasố ký tự nhập vào phải thỏa nhỏ hơn hoặc bằng

<label for="FS">Select a file smaller than 75 kB : label>
<input type="file" id="FS">

7

Ví dụ

<form>
  <label for="name">Enter username (upper and lowercase letters): label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+">
  <button>Submitbutton>
form>

Quá trình validate dữ liệu

Quá trình này sẽ thông qua bộ Validation API, nó có thể là trên cả form hoặc trên từng element trong form. Được thực hiện bằng một trong các cách sau bằng cách gọi

<label for="FS">Select a file smaller than 75 kB : label>
<input type="file" id="FS">

9 của các element input, select, button, textarea. Nó sẽ chỉ validate dữ liệu trên element đó thôi. Nó thường được thực hiện bởi trình duyệt, sau đó chúng ta dùng selector của CSS là

function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Nếu có ít nhất 1 file được chọn
  if (files.length > 0) {
     if (files[0].size > 75 * 1024) { // kiểm tra size
       FS.setCustomValidity("The selected file must not be larger than 75 kB");
       return;
     }
  }
  // Không có file, ko check.
  FS.setCustomValidity("");
}

0 và

function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Nếu có ít nhất 1 file được chọn
  if (files.length > 0) {
     if (files[0].size > 75 * 1024) { // kiểm tra size
       FS.setCustomValidity("The selected file must not be larger than 75 kB");
       return;
     }
  }
  // Không có file, ko check.
  FS.setCustomValidity("");
}

1 để format gọi

<label for="FS">Select a file smaller than 75 kB : label>
<input type="file" id="FS">

9 hoặc

function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Nếu có ít nhất 1 file được chọn
  if (files.length > 0) {
     if (files[0].size > 75 * 1024) { // kiểm tra size
       FS.setCustomValidity("The selected file must not be larger than 75 kB");
       return;
     }
  }
  // Không có file, ko check.
  FS.setCustomValidity("");
}

3 trên thằng form Khi form được submit bằng click ‘

function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Nếu có ít nhất 1 file được chọn
  if (files.length > 0) {
     if (files[0].size > 75 * 1024) { // kiểm tra size
       FS.setCustomValidity("The selected file must not be larger than 75 kB");
       return;
     }
  }
  // Không có file, ko check.
  FS.setCustomValidity("");
}

4 hoặc ấn enter

Lưu ý

Nếu set novalidate trên thẻ

function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Nếu có ít nhất 1 file được chọn
  if (files.length > 0) {
     if (files[0].size > 75 * 1024) { // kiểm tra size
       FS.setCustomValidity("The selected file must not be larger than 75 kB");
       return;
     }
  }
  // Không có file, ko check.
  FS.setCustomValidity("");
}

5, là chúng ta bỏ qua hết việc validate

Khi gọi

function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Nếu có ít nhất 1 file được chọn
  if (files.length > 0) {
     if (files[0].size > 75 * 1024) { // kiểm tra size
       FS.setCustomValidity("The selected file must not be larger than 75 kB");
       return;
     }
  }
  // Không có file, ko check.
  FS.setCustomValidity("");
}

6 trên form, không trigger validation, phương thức này sẽ gửi hết dữ liệu của form lên server dù nó có hay không thỏa điều kiện. Nên gọi sự kiện

function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Nếu có ít nhất 1 file được chọn
  if (files.length > 0) {
     if (files[0].size > 75 * 1024) { // kiểm tra size
       FS.setCustomValidity("The selected file must not be larger than 75 kB");
       return;
     }
  }
  // Không có file, ko check.
  FS.setCustomValidity("");
}

7 của nút submit

Can thiệp vào quá trình validate bằng bộ Validation API

Ý tưởng chính là bắt một sự kiện nào đó trên element như

function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Nếu có ít nhất 1 file được chọn
  if (files.length > 0) {
     if (files[0].size > 75 * 1024) { // kiểm tra size
       FS.setCustomValidity("The selected file must not be larger than 75 kB");
       return;
     }
  }
  // Không có file, ko check.
  FS.setCustomValidity("");
}

8, rồi trigger một đoạn javascript để validate, sau đó dùng phương thức

function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Nếu có ít nhất 1 file được chọn
  if (files.length > 0) {
     if (files[0].size > 75 * 1024) { // kiểm tra size
       FS.setCustomValidity("The selected file must not be larger than 75 kB");
       return;
     }
  }
  // Không có file, ko check.
  FS.setCustomValidity("");
}

9 để set kết quả validate: nếu là String rỗng nghĩa là ok, còn ngược lại là error, đoạn string này sẽ đem đi hiển thị như thông báo error cho user

Giới hạn file size khi upload

<label for="FS">Select a file smaller than 75 kB : label>
<input type="file" id="FS">

Dùng javascript để đọc file được chọn,

window.onload = function () {
  document.getElementById("FS").onchange = checkFileSize;
}

0, so sánh kích thước này rồi trả về kết quả cho trình duyệt

function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Nếu có ít nhất 1 file được chọn
  if (files.length > 0) {
     if (files[0].size > 75 * 1024) { // kiểm tra size
       FS.setCustomValidity("The selected file must not be larger than 75 kB");
       return;
     }
  }
  // Không có file, ko check.
  FS.setCustomValidity("");
}

Hook cái phương thức này vào trong sự kiện mong muốn

window.onload = function () {
  document.getElementById("FS").onchange = checkFileSize;
}

Hiển thị validation

Dùng

window.onload = function () {
  document.getElementById("FS").onchange = checkFileSize;
}

1 và

window.onload = function () {
  document.getElementById("FS").onchange = checkFileSize;
}

2 để trỏ đến các element nào có thuộc tính

<label for="FS">Select a file smaller than 75 kB : label>
<input type="file" id="FS">

4 hoặc không

input:required {
    border: red;
}
input:optional {
    border: blue;
}

function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Nếu có ít nhất 1 file được chọn
  if (files.length > 0) {
     if (files[0].size > 75 * 1024) { // kiểm tra size
       FS.setCustomValidity("The selected file must not be larger than 75 kB");
       return;
     }
  }
  // Không có file, ko check.
  FS.setCustomValidity("");
}

0 và

function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Nếu có ít nhất 1 file được chọn
  if (files.length > 0) {
     if (files[0].size > 75 * 1024) { // kiểm tra size
       FS.setCustomValidity("The selected file must not be larger than 75 kB");
       return;
     }
  }
  // Không có file, ko check.
  FS.setCustomValidity("");
}

1 trên các element bị/không bị lỗi

input:valid {
    border: black;
}
input:invalid {
    border: red;
}

Để thay đổi nội dung câu thông báo, sử dụng

window.onload = function () {
  document.getElementById("FS").onchange = checkFileSize;
}

6 trên các element:

window.onload = function () {
  document.getElementById("FS").onchange = checkFileSize;
}

7,

window.onload = function () {
  document.getElementById("FS").onchange = checkFileSize;
}

8,

window.onload = function () {
  document.getElementById("FS").onchange = checkFileSize;
}

9,

input:required {
    border: red;
}
input:optional {
    border: blue;
}

0,

input:required {
    border: red;
}
input:optional {
    border: blue;
}

1,

input:required {
    border: red;
}
input:optional {
    border: blue;
}

2

programming javascript

Hướng dẫn dùng setcustomvalidity JavaScript

Bài tập

Một vài ràng buộc phổ biến

Quá trình validate dữ liệu

Can thiệp vào quá trình validate bằng bộ Validation API

Giới hạn file size khi upload

Hiển thị validation

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội