Hôm nay chúng ta sẽ học cách làm xác thực biểu mẫu trong JavaScript. Chúng tôi cũng sẽ thêm các truy vấn hình ảnh và phương tiện để xây dựng toàn bộ dự án và giữ nó như một danh mục đầu tư.
Đây là bản demo dự án mà chúng ta sẽ xây dựng 👇
Đây là một ví dụ nhỏ về cách thức hoạt động của biểu mẫu 👇
Bạn cũng có thể xem hướng dẫn này trên YouTube nếu muốn:
Mã nguồn
Bạn có thể lấy mã nguồn, bao gồm cả hình ảnh, từ đây:
Thực hiện theo các bước sau để thiết lập dự án của chúng tôi: 👇
- Tạo một thư mục mới có tên “Project” và mở VS Code
- Tạo các tệp index.html, style.css và main.js
- Liên kết các tệp bên trong HTML
- Tải xuống hình ảnh từ kho lưu trữ GitHub của tôi
- Dán liên kết phông chữ tuyệt vời này vào bên trong thẻ đầu. Sau đó, chúng ta có thể truy cập các biểu tượng Font Awesome 👇👇
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
crossorigin="anonymous"
/>
- Viết HTML
- Thêm CSS
- Viết JavaScript
- Thêm một nút phương tiện truyền thông xã hội
- Thêm hình ảnh
- Truy vấn phương tiện cho phiên bản di động (đáp ứng)
Tạo một lớp có tên .container bên trong thẻ body và lưu trữ thẻ biểu mẫu sẽ có id biểu mẫu 👇
<div class="container">
<form id="form"></form>
</div>Và bên trong thẻ biểu mẫu, tạo 4 divs, như thế này 👇
<form id="form">
<div class="title">Get Started</div>
<div></div>
<div></div>
<div></div>
</form>Bên trong 3 thẻ div trống đó, hãy tạo 3 đầu vào [Username, Email, and Password] cùng với các biểu tượng và nhãn.
Ghi chú: chúng tôi đang tạo ra một .error tên lớp. Chúng tôi sẽ đưa thông báo lỗi vào đây bằng JavaScript.
Nhập tên người dùng
<!-- User Name input -->
<div>
<label for="username">User Name</label>
<i class="fas fa-user"></i>
<input
type="text"
name="username"
id="username"
placeholder="Joy Shaheb"
/>
<i class="fas fa-exclamation-circle failure-icon"></i>
<i class="far fa-check-circle success-icon"></i>
<div class="error"></div>
</div>Nhập email
<!-- Email input -->
<div>
<label for="email">Email</label>
<i class="far fa-envelope"></i>
<input
type="email"
name="email"
id="email"
placeholder="[email protected]"
/>
<i class="fas fa-exclamation-circle failure-icon"></i>
<i class="far fa-check-circle success-icon"></i>
<div class="error"></div>
</div>Nhập mật khẩu
<!-- Password input -->
<div>
<label for="password">Password</label>
<i class="fas fa-lock"></i>
<input
type="password"
name="password"
id="password"
placeholder="Password here"
/>
<i class="fas fa-exclamation-circle failure-icon"></i>
<i class="far fa-check-circle success-icon"></i>
<div class="error"></div>
</div>Cách làm nút
Cuối cùng, thêm nút trước thẻ đóng biểu mẫu như thế này:
<form>
<!-- other codes are here -->
<button id="btn" type="submit">Submit</button>
</form>Đây là kết quả cho đến nay 👇
Chúc mừng bạn đã hoàn thành phần HTML! 🍾🎉🥂
Hãy thêm CSS để tạo kiểu cho biểu mẫu của chúng ta. Trước tiên, hãy xóa các kiểu mặc định của trình duyệt, bao gồm cả họ phông chữ👇
/**
* ! changing default styles of brower
**/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}Bây giờ, hãy áp dụng các kiểu này cho thẻ biểu mẫu:
/**
* ! style rules for form section
**/
form {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 400px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
padding: 50px;
}Tiếp theo, thực hiện những thay đổi này cho văn bản tiêu đề của chúng ta: 👇👇
.title {
font-size: 25px;
font-weight: bold;
margin-bottom: 20px;
}Kết quả của bạn cho đến nay 👇👇
Bây giờ, thêm một lề vào dưới cùng của văn bản nhãn của chúng tôi như thế này:
label {
display: block;
margin-bottom: 5px;
}Và thêm các kiểu này để thay đổi giao diện của thẻ đầu vào của chúng tôi 👇👇
form div input {
width: 100%;
height: 40px;
border-radius: 8px;
outline: none;
border: 2px solid #c4c4c4;
padding: 0 30px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
Thêm mã này để thêm một số hiệu ứng thay đổi không gian và màu sắc:
form div {
position: relative;
margin-bottom: 15px;
}
input:focus {
border: 2px solid #f2796e;
}Kết quả cho đến nay 👇👇
Cách tạo kiểu cho các biểu tượng
Bây giờ chúng ta sẽ tạo kiểu cho các biểu tượng mà chúng ta đã nhập từ font-awesome. Làm theo cùng với mã: ✨✨
/**
* ! style rules for form icons
**/
form div i {
position: absolute;
padding: 10px;
}
Đây là kết quả của việc thêm hai dòng đó 👇👇
Bây giờ, hãy thêm các kiểu này để tạo kiểu cho lớp lỗi, cùng với các biểu tượng thành công và thất bại 👇👇
.failure-icon,
.error {
color: red;
}
.success-icon {
color: green;
}
.error {
font-size: 14.5px;
margin-top: 5px;
}Đây là kết quả cho đến nay 👇👇
Hãy nhìn xem, các biểu tượng thành công và thất bại đang chồng lên nhau. Đừng lo lắng, chúng tôi sẽ thao tác chúng trong JavaScript. Hiện tại, bạn có thể ẩn chúng như thế này👇👇
.success-icon,
.failure-icon {
right: 0;
opacity: 0;
}
Bây giờ, hãy tạo kiểu cho nút gửi của chúng ta, như thế này 👇
/* Style rules for submit btn */
button {
margin-top: 15px;
width: 100%;
height: 45px;
background-color: #f2796e;
border: 2px solid #f2796e;
border-radius: 8px;
color: #fff;
font-size: 20px;
cursor: pointer;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.1s ease;
}Nếu bạn muốn thêm hiệu ứng di chuột, thì chắc chắn, hãy thêm các kiểu này 👇👇
button:hover {
opacity: 0.8;
}Càng xa càng tốt. Hãy nghỉ ngơi – bạn xứng đáng với điều đó.
Trước tiên, chúng ta cần nhắm mục tiêu tất cả các lớp và id từ HTML bên trong JavaScript. Để thực hiện tác vụ này một cách hiệu quả, hãy tạo hai chức năng này 👇👇
let id = (id) => document.getElementById(id);
let classes = (classes) => document.getElementsByClassName(classes);Sau đó, lưu trữ các lớp và id bên trong các biến này 👇
Ghi chú: Cố gắng không mắc lỗi chính tả. Nếu không, JavaScript của bạn sẽ không hoạt động.
let username = id("username"),
email = id("email"),
password = id("password"),
form = id("form"),
errorMsg = classes("error"),
successIcon = classes("success-icon"),
failureIcon = classes("failure-icon");Bây giờ, chúng tôi sẽ nhắm mục tiêu biểu mẫu của chúng tôi và thêm Gửi đi người nghe sự kiện 👇
form.addEventListener("submit", (e) => {
e.preventDefault();
});
Bây giờ, chúng ta sẽ tạo một hàm có tên là engine sẽ thực hiện tất cả các loại xác thực biểu mẫu cho chúng ta. Nó sẽ có ba đối số – hãy làm theo tại đây: 👇
let engine = (id, serial, message) => {}Các đối số đại diện như sau:
idsẽ nhắm mục tiêu id của chúng tôiserialsẽ nhắm mục tiêu các lớp học của chúng tôi [error class, success and failure icons]messagesẽ in một thông báo bên trong lớp .error của chúng ta
Bây giờ hãy tạo một if, else tuyên bố như thế này 👇
let engine = (id, serial, message) => {
if (id.value.trim() === "") {
}
else {
}
}Ghi chú: các id.value.trim() sẽ xóa tất cả các khoảng trắng thừa khỏi giá trị mà người dùng nhập vào. Bạn có thể biết được cách thức hoạt động của nó bằng cách nhìn vào hình minh họa này 👇
Bây giờ, hãy nhìn vào mục tiêu của chúng ta 👇
- Chúng tôi muốn JavaScript in một thông báo bên trong lỗi lớp bất cứ khi nào người dùng gửi một khoảng trống mẫu đơn. Đồng thời, chúng tôi muốn các thất bại biểu tượng để làm nổi bật là tốt.
- Nhưng, nếu người dùng điền vào tất cả các đầu vào và gửi nó, chúng tôi muốn thành công biểu tượng để được nhìn thấy.
Để thực hiện điều này, hãy viết logic này 👇 để in thông báo:
let engine = (id, serial, message) => {
if (id.value.trim() === "") {
errorMsg[serial].innerHTML = message;
}
else {
errorMsg[serial].innerHTML = "";
}
}Để các biểu tượng hoạt động bình thường, hãy thêm mã này: 👇👇
let engine = (id, serial, message) => {
if (id.value.trim() === "") {
errorMsg[serial].innerHTML = message;
id.style.border = "2px solid red";
// icons
failureIcon[serial].style.opacity = "1";
successIcon[serial].style.opacity = "0";
}
else {
errorMsg[serial].innerHTML = "";
id.style.border = "2px solid green";
// icons
failureIcon[serial].style.opacity = "0";
successIcon[serial].style.opacity = "1";
}
}Thời gian để thực hiện chức năng mới được tạo của chúng tôi. Viết những thứ này vào nơi chúng tôi đã thêm trình xử lý sự kiện gửi 👇
form.addEventListener("submit", (e) => {
e.preventDefault();
engine(username, 0, "Username cannot be blank");
engine(email, 1, "Email cannot be blank");
engine(password, 2, "Password cannot be blank");
});Ở đây, chúng tôi đang chuyển tên id, sê-ri của tên lớp và chuyển thông báo sẽ được in khi chúng tôi tìm thấy lỗi khi người dùng gửi biểu mẫu.
Đây là kết quả cho đến nay 👇
Cho đến nay là tốt, hãy thêm các tùy chọn đăng ký phương tiện truyền thông xã hội. Cùng theo dõi tại đây. 👇
Bên trong thẻ biểu mẫu, tạo một thẻ mới div với tên lớp social:
<form id="form">
<div class="social">
<div class="title">Get Started</div>
<div class="question">
Already Have an Account? <br />
<span>Sign In</span>
</div>
<div class="btn"></div>
<div class="or">Or</div>
</div>
<!-- other codes are here-->
</form>Bên trong .btn lớp, chúng tôi tạo thêm hai div với tên lớp .btn-1 và .btn-2 với cả hình ảnh và văn bản
<div class="btn">
<div class="btn-1">
<img src="https://img.icons8.com/color/30/000000/google-logo.png" />
Sign Up
</div>
<div class="btn-2">
<img src="https://img.icons8.com/ios-filled/30/ffffff/facebook-new.png" />
Sign Up
</div>
</div>Đây là kết quả cho đến nay 👇👇
Bây giờ, hãy tạo kiểu cho .btn-1 và .btn-2 đầu tiên. Chúng tôi sẽ thay đổi căn chỉnh của các nút thành hàng từ cột 👇
/**
* ! style rules for social section
**/
.btn {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 15px;
}Đây là những gì nó trông giống như bây giờ:
Bây giờ, thêm kiểu cho nút như thế này: 👇
.btn-1,
.btn-2 {
padding: 10px 5px;
width: 100%;
display: flex;
gap: 15px;
justify-content: center;
align-items: center;
border: 2px solid #c4c4c4;
border-radius: 8px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
}Thay đổi màu biểu tượng và màu văn bản của .btn-2 như thế này: 👇
.btn-2 {
background-color: #4f70b5;
color: white;
}Sau đó, thêm những thay đổi nhỏ này để làm cho thành phần trông đẹp hơn:
.or {
text-align: center;
}
.question {
font-size: 15px;
}
span {
color: #f2796e;
cursor: pointer;
}Kết quả cho đến nay:
Cách thêm hình ảnh
Bây giờ, hãy thêm hình ảnh vào dự án của chúng ta. Đầu tiên, hãy viết HTML 👇
<div class="container">
<div class="content">
<div class="logo">
<img src="https://svgshare.com/i/_go.svg" alt="" />
</div>
<div class="image"></div>
<div class="text">
Start for free & get <br />
attractive offers today !
</div>
</div>
<form id="form">
<!--other codes are here -->
</form>
</div>Kết quả cho đến nay 👇
Bây giờ chúng ta cần thay đổi hướng của nội dung từ cột này sang hàng khác. Cùng theo dõi 👇
.container {
display: flex;
flex-direction: row;
}Thêm các quy tắc kiểu này cho phần nội dung:
/**
* ! style rules for content section
**/
.content {
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: #f2796e;
width: 55%;
min-height: 100vh;
padding: 10px 20px;
}
form {
width: 45%;
max-width: none;
}Kết quả cho đến nay 👇
Thêm hình minh họa chính trong CSS:
.image {
background-image: url("https://svgshare.com/i/_gZ.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
/* border: 2px solid black; */
height: 65%;
}
Và thêm các phong cách này cho .text lớp:
.text {
text-align: center;
color: white;
font-size: 18px;
}
form {
width: 45%;
max-width: none;
}Kết quả cho đến nay 👇
Chúng tôi muốn làm cho điều này đáp ứng. Vì vậy, chúng tôi sẽ thêm các truy vấn phương tiện để giúp chúng tôi thực hiện điều đó.
Đối với màn hình có chiều rộng từ 900px, chúng tôi sẽ thêm các kiểu này. Cùng theo dõi nào 👇👇
@media (max-width: 900px) {
.container {
flex-direction: column;
}
form,
.content {
width: 100%;
}
.btn {
flex-direction: column;
}
.image {
height: 70vh;
}
}Đối với màn hình có chiều rộng từ 425px, chúng tôi sẽ thực hiện những thay đổi nhỏ này 👇
@media (max-width: 425px) {
form {
padding: 20px;
}
}
Đây là kết quả cuối cùng 👇👇
Xin chúc mừng vì đã đọc đến cuối. Giờ đây, bạn có thể sử dụng JavaScript một cách dễ dàng và hiệu quả để xử lý xác thực biểu mẫu. Không chỉ có vậy, bạn cũng có một dự án để hiển thị nhà tuyển dụng địa phương của bạn!
Đây là huy chương của bạn vì đã đọc đến cuối ❤️
Đề xuất & phê bình được đánh giá cao ❤️
