Hướng dẫn kiểm tra form hợp lệ với Javascript cho web bóng đá

Đối với bất kì website nào, bạn cũng có thể xây dựng được cho mình một ứng dụng Javascript để kiểm tra form có hợp lệ hay không. Bạn sẽ làm chủ được code của mình tốt hơn và tùy chỉnh ứng dụng được theo ý của mình.

Kiểm tra form hợp lệ với Javascript cho web bóng đá

Để người dùng tương tác với website, thì form là một chức năng quan trọng. Đối với các web bóng đá, hiện nay phương pháp HTML5 với form cải tiến đem đến cho form những thuộc tính mới. Người dùng khi set up form cũng dễ dàng và trực quan hơn. Form của phiên bản HTML5 với cải tiến lớn đó là bổ sung thêm nhiều kiểu input mới. Điều này đã giúp người dùng thuận tiện hơn.

Bạn có thể xem thêm tài liệu về ngôn ngữ lập trình JavaScript: http://eclipsercp.org/code-javascript/

Kiểm tra form hợp lệ với javascript
Kiểm tra form hợp lệ với javascript

Các kiểu dữ liệu của form cũng được thỏa mãn, việc tương tác với form cũng trực quan hơn. Ưu điểm của cấu trúc form đó là chặt chẽ và giúp dữ liệu nhập vào hợp lệ hơn. Color, date, datetime, month, number, email, tel, range, search, url,…là một số kiểu input mới được người dùng đánh giá khá cao.

Bạn chưa hiểu rõ về JavaScript, hãy tham khảo thêm tài liệu về JavaScript căn bản nhé!

Những thuộc tính cần biết khi kiểm tra form

Autocomplete

Một điều vô cùng thuận tiện cho người dùng đó là không phải gõ lại những từ đã gõ. Khi dùng thuộc tính autocomplete, mọi thứ sẽ rõ ràng hơn nhờ HTML5. Hai giá trị là ‘on’ hay ‘off’ đều được thuộc tính này nhận ra. Ở autocomplete, tương đương với chức năng cho phép hay không cho phép. Các phần tử như <form>, và các loại <input> như text, password, email, search, range, tel,…đều được dùng trong thuộc tính này.

Novalidate

Thuộc tính không có giá trị này là thuộc tính dành cho phần tử <form>, giúp xác định form có cần chức năng Validation hay không. Validate sẽ là không cần thiết nếu thuộc tính này được thêm vào form.

Autofocus

Khi trang form được tải, đây là thuộc tính Boolean không có giá trị, thuộc tính được thêm vào sẽ xác định <input> nào được focus.

List

Phần tử input sẽ được định nghĩa một số tùy chọn nhờ thuộc tính này. Những dạng mà danh sách tùy chọn được sổ xuống có thể kể đến là dạng gợi ý cho phần tử input. Thuộc tính list sẽ có giá trị tương đương với giá trị id của phần tử <datalist>. Các phần tử <option> bên trong phần tử <datalist> sẽ định nghĩa tùy chọn bên trên.

Ví dụ về thuộc tính list.
Ví dụ về thuộc tính list.

Min and max

Làm việc với các kiểu input như number, datetime, date, datetime-local, time and week… thuộc tính này xác định giá trị nhỏ nhất hay lớn nhất mà phần tử <input> có thể nhận.

Pattern

Ví dụ về thuộc tính Pattern
Ví dụ về thuộc tính Pattern

Đối với các phần tử input thì đây là thuộc tính rất hay nhằm kiểm tra sự hợp lệ của dữ liệu theo biểu thức quy tắc. Cũng giống như biểu thức quy tắc khi bạn làm việc với Javascript thì cú pháp biểu thức quy tắc giúp bạn sử dụng thêm thuộc tính title của input để hiển thị chú thích cho input. Những kiểu input mà thuộc tính pattern có thể làm việc đó là search, tel, url, password.

Nếu bạn đang tìm hiểu về xử lý form bằng javascript, hãy xem bài viết “Hướng dẫn xử lý form bằng Javascipt đơn giản cho người mới” nhé.

Placeholder

Thuộc tính giúp tạo ra giá trị gợi ý cho người dùng nhập vào field input được nhiều người mong đợi từ lâu. Gợi ý sẽ xuất hiện khi giá trị của field rỗng, và sẽ biến mất khi field có giá trị, trước đây để có điều này bạn phải viết thêm một đoạn javaScript nhưng giờ mọi thứ đã trở nên dễ dàng, thuộc tính làm việc với các kiểu input như: text, search, url, tel, email, and password.

Required

Thuộc tính yêu cầu người dùng phải nhập liệu trước khi form được kích hoạt, thuộc tính là kiểu boolean không có giá trị, có thể thấy đây là thuộc tính sẽ được dùng thường xuyên, thuộc tính làm việc với các kiểu input như: text, search, url, tel, email, password, date pickers, number, checkbox, radio, và file.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *