programming javascript

Kiểm tra javascript đầu vào trống

Một cách tuyệt vời để cải thiện trải nghiệm người dùng trên trang web của bạn là xác thực và gửi biểu mẫu mà không cần làm mới trang

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách dễ dàng để làm điều đó—xác thực và gửi biểu mẫu liên hệ mà không cần làm mới trang bằng jQuery. Bắt đầu nào

Gửi biểu mẫu mà không cần làm mới trang bằng jQuery

Những gì chúng tôi đang xây dựng

Trong ví dụ này, chúng tôi có một biểu mẫu liên hệ đơn giản với tên, email và số điện thoại. Biểu mẫu gửi tất cả các trường tới tập lệnh PHP mà không cần làm mới trang, sử dụng các hàm jQuery gốc

1.  Tạo biểu mẫu HTML

Hãy xem đánh dấu HTML của chúng tôi. Chúng tôi bắt đầu với biểu mẫu HTML cơ bản của mình

  

  
    
      

      Name
      
      

      
      

      Email
      
      

      
      

      Phone
      
      

      
      
    
  
    

    
Contact US

      
We are waiting to hear from you!

Bạn có thể nhận thấy rằng tôi đã bao gồm một 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
1 với id 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
2 bao quanh toàn bộ biểu mẫu

Hãy chắc chắn rằng bạn không bỏ lỡ 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
1 trong biểu mẫu của riêng bạn vì chúng tôi sẽ cần trình bao bọc này 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
1 sau này. Bạn cũng có thể nhận thấy rằng tôi đã để trống cả phần hành động và phần phương thức của thẻ biểu mẫu. Chúng tôi thực sự không cần một trong hai thứ này ở đây, bởi vì jQuery sẽ lo tất cả sau này

Một điều quan trọng khác là đảm bảo bao gồm 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
5 giá trị cho mỗi trường đầu vào. Các giá trị 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
5 là những gì tập lệnh jQuery của bạn sẽ tìm kiếm để xử lý biểu mẫu với

Chúng tôi cũng đang thực hiện một số xác thực rất cơ bản phía máy khách bằng cách sử dụng các thuộc tính HTML5 như 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
7 và 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
8. Thuộc tính 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
8 sẽ đảm bảo rằng người dùng cung cấp tên dài ít nhất ba ký tự. Tương tự, thuộc tính 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
7 đảm bảo rằng người dùng điền vào tất cả các giá trị biểu mẫu mà bạn cần

Bạn có thể đọc thêm về các thuộc tính này trong hướng dẫn của chúng tôi về cách xác thực thông tin nhập vào biểu mẫu chỉ bằng HTML5 và Regex

  • Xác thực đầu vào biểu mẫu chỉ sử dụng HTML5 và Regex

    Monty Shokeen

    26 Th03 2021

Tôi đã thêm một số kiểu CSS để tạo biểu mẫu sau

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}

2.  Bắt đầu thêm jQuery

Bước tiếp theo trong quy trình là thêm một số mã jQuery. Tôi giả định rằng bạn đã tải jQuery xuống, tải lên máy chủ của mình và đang tham chiếu nó trong trang web của bạn

Tiếp theo, hãy mở một tệp JavaScript mới khác, tham chiếu tệp đó trong HTML của bạn giống như bất kỳ tệp JavaScript thông thường nào và thêm phần sau

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
2

Chức năng này chạy ngay khi tài liệu HTML đã sẵn sàng. Nếu bạn đã thực hiện bất kỳ công việc nào trong jQuery trước đây, chức năng này giống như tài liệu của jQuery. chức năng sẵn sàng. Bên trong, chúng tôi sẽ thiết lập mã xác thực của mình

3.  Viết một số xác thực biểu mẫu

Bây giờ chúng ta sẽ viết một số xác thực biểu mẫu cơ bản bằng jQuery. Điều này sẽ cải thiện khi xác nhận chúng tôi có cho đến nay. Việc sử dụng thư viện xác thực cho phép chúng tôi kiểm soát nhiều hơn đối với các thông báo lỗi được hiển thị cho người dùng. Nó cũng yêu cầu tối thiểu hoặc không có thay đổi trong đánh dấu của biểu mẫu

Bắt đầu bằng cách tải thư viện Xác thực jQuery trên trang web của bạn. Bây giờ, chỉ cần thêm đoạn mã sau

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
3

Đảm bảo bạn chuyển đúng bộ chọn khi gọi phương thức 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
21 . Điều này sẽ xác thực biểu mẫu mà không yêu cầu bạn viết bất kỳ thông báo lỗi nào trong HTML hoặc logic để hiển thị và ẩn các thông báo lỗi khác nhau trong JavaScript. Hãy thử gửi biểu mẫu mà không điền vào bất kỳ giá trị nào hoặc bằng cách cố ý thêm thông tin nhập sai. Biểu mẫu sẽ hiển thị một thông báo lỗi đẹp mắt như hình ảnh sau

Việc sử dụng thư viện xác thực cũng cho phép bạn thêm logic xác thực có điều kiện vào biểu mẫu của mình. Ví dụ: bạn sẽ chỉ có thể thêm mã yêu cầu số điện thoại khi địa chỉ email chưa được cung cấp. Tôi đã trình bày chi tiết hơn về vấn đề này trong hướng dẫn xác thực biểu mẫu jQuery

  • Xác thực biểu mẫu dễ dàng với jQuery

    Monty Shokeen

    09 Th07 2021

4.  Xử lý gửi biểu mẫu bằng hàm jQuery AJAX

Bây giờ chúng ta đi vào trọng tâm của hướng dẫn—gửi biểu mẫu mà không cần làm mới trang, thao tác này sẽ gửi các giá trị của biểu mẫu tới một tập lệnh PHP trong nền. Trước tiên chúng ta hãy xem qua tất cả mã, sau đó tôi sẽ chia nhỏ mã thành chi tiết hơn trong phần tiếp theo. Thêm mã sau ngay bên dưới đoạn mã xác thực mà chúng tôi đã thêm trước đó

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
5

Có rất nhiều thứ đang diễn ra ở đây. Hãy chia nhỏ tất cả—nó rất đơn giản và dễ sử dụng khi bạn hiểu quy trình

Trước tiên, chúng tôi tạo một chuỗi giá trị, là tất cả các giá trị biểu mẫu mà chúng tôi muốn chuyển đến tập lệnh gửi email. Điều này có thể đạt được khá dễ dàng bằng cách sử dụng phương thức 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
22 tích hợp sẵn trong jQuery. Bằng cách này, bạn không phải lo lắng về việc tự nhận và ghép các giá trị của các đầu vào hợp lệ khác nhau của người dùng

Tôi đã nhận xét một cảnh báo mà đôi khi tôi sử dụng để đảm bảo rằng mình đang lấy đúng giá trị mà bạn có thể thấy hữu ích trong quá trình này. Nếu bạn bỏ ghi chú cảnh báo đó và kiểm tra biểu mẫu của mình, giả sử mọi thứ đã ổn cho đến nay, bạn sẽ nhận được một thông báo tương tự như sau

Bây giờ chúng ta đến chức năng AJAX chính của chúng ta, ngôi sao của chương trình hôm nay. Đây là nơi tất cả các hành động xảy ra, vì vậy hãy chú ý

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
7

Về cơ bản, những gì đang xảy ra trong mã là thế này. Hàm 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
23 xử lý các giá trị từ chuỗi của chúng tôi có tên là 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
24 với tập lệnh PHP có tên là bin/process. php, sử dụng loại phương thức HTTP POST. Nếu tập lệnh của chúng tôi được xử lý thành công, thì chúng tôi có thể hiển thị lại thông báo cho người dùng và cuối cùng 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
25 để trang không tải lại. Đó là nó. Toàn bộ quá trình được xử lý ngay trong vài dòng này

Có nhiều điều nâng cao hơn bạn có thể làm ở đây, ngoài việc đưa ra thông báo thành công. Ví dụ: bạn có thể gửi các giá trị của mình tới cơ sở dữ liệu, xử lý chúng và sau đó hiển thị kết quả lại cho người dùng. Vì vậy, nếu bạn đã đăng một cuộc thăm dò cho người dùng, bạn có thể xử lý phiếu bầu của họ và sau đó trả về kết quả bỏ phiếu mà không cần phải làm mới trang

Hãy tóm tắt những gì đã xảy ra trong ví dụ của chúng tôi, để chắc chắn rằng chúng tôi đã đề cập đến mọi thứ. Chúng tôi đã lấy các giá trị biểu mẫu của mình bằng jQuery bằng phương thức 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
22 và sau đó đặt các giá trị đó vào một chuỗi như thế này

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
2

Sau đó, chúng tôi đã sử dụng hàm 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
27 của jQuery để xử lý các giá trị trong 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
24. Sau khi quá trình đó kết thúc thành công, chúng tôi sẽ hiển thị một thông báo lại cho người dùng và 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
25 để trang của chúng tôi không làm mới

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
6

Phần thành công của tập lệnh đã được điền vào một số nội dung cụ thể có thể hiển thị lại cho người dùng. Nhưng đối với chức năng AJAX của chúng tôi, đó là tất cả những gì cần làm. Để biết thêm tùy chọn và cài đặt, hãy nhớ xem tài liệu của jQuery về hàm 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
30. Ví dụ ở đây là một trong những cách triển khai đơn giản hơn, nhưng ngay cả như vậy, nó vẫn rất mạnh mẽ, như bạn có thể thấy

5.  Hiển thị thông báo gửi lại cho người dùng

Hãy xem qua phần mã hiển thị thông báo của chúng tôi cho người dùng để kết thúc hướng dẫn

Đầu tiên, chúng tôi thay đổi toàn bộ nội dung của 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
31 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
1 [hãy nhớ rằng tôi đã nói rằng chúng tôi sẽ cần 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
1 đó] bằng dòng sau

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
1

Thao tác này sẽ thay thế tất cả nội dung bên trong biểu mẫu liên hệ, sử dụng hàm 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
34 của jQuery. Vì vậy, thay vì một biểu mẫu, giờ đây chúng tôi có một 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
1 mới với một 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
5 là 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
37. Tiếp theo, chúng tôi điền vào div đó bằng một thông báo thực tế. một 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
38 nói Đã gửi Biểu mẫu liên hệ

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
7

Chúng tôi sẽ thêm nhiều nội dung hơn nữa vào tin nhắn bằng hàm 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
39 của jQuery và trên hết, chúng tôi thêm một hiệu ứng thú vị bằng cách ẩn div của tin nhắn bằng hàm 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
50 của jQuery, sau đó làm mờ nó bằng hàm 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
51

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
0

Vì vậy, người dùng sẽ thấy những điều sau đây sau khi họ gửi biểu mẫu

Sự kết luận

Đến bây giờ, tôi nghĩ bạn sẽ phải đồng ý rằng thật dễ dàng để gửi biểu mẫu mà không cần làm mới trang bằng cách sử dụng hàm 

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
27 mạnh mẽ của jQuery. Chỉ cần lấy các giá trị trong tệp JavaScript của bạn, xử lý chúng bằng hàm 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
27 và trả về 
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  font-weight: 300;
}

div#contact_form {
  width: 800px;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border: 2px solid black;
  padding: 10px;
}

div.input-box {
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}

div.input-box label {
  display: inline-block;
  margin: 10px 10px 10px 0;
  width: 20%;
}

div.input-box input {
  font-size: 1.5rem;
  border: 1px solid #ccc;
  padding: 4px 8px;
  flex: 1;
}

input.button {
  font-size: 1.5rem;
  background: black;
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 4px 40px;
}

h1 {
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Passion One';
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 0.8;
}

div.greetings {
  text-align: center;
  font-size: 1.2rem;
  background-color: #d3d3d3;
  background-image: linear-gradient[15deg, transparent 28%, rgba[255, 255, 255, 0.5] 28%];
  background-size: 50px;
}

div.input-box input.error {
    border: 2px dashed red;
    background: #fee;
}

div.input-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
    margin: 10px 0;
}
54. Bạn có thể xử lý các giá trị trong tập lệnh PHP của mình giống như bất kỳ tệp PHP nào khác, điểm khác biệt duy nhất là người dùng không phải chờ làm mới trang—tất cả diễn ra âm thầm trong nền

Vì vậy, nếu bạn có biểu mẫu liên hệ trên trang web của mình, biểu mẫu đăng nhập hoặc thậm chí các biểu mẫu nâng cao hơn xử lý các giá trị thông qua cơ sở dữ liệu và truy xuất kết quả, bạn có thể thực hiện tất cả điều đó một cách dễ dàng và hiệu quả với AJAX

Học JavaScript với một khóa học miễn phí

Nếu bạn muốn thành thạo JavaScript, hãy nhớ xem khóa học miễn phí của chúng tôi để tìm hiểu toàn bộ từ A-Z về nguyên tắc cơ bản của JavaScript hiện đại

Trong khóa học này, bạn sẽ học tất cả các khái niệm cơ bản về ngôn ngữ JavaScript. Đúng rồi. Tất cả bọn họ. Bao gồm những cải tiến quan trọng nhất gần đây đối với ngôn ngữ, trong JavaScript ES6 [ECMAScript 2015] và JavaScript ES7 [ECMAScript 2016]

Bạn sẽ bắt đầu với những nguyên tắc cơ bản của ngôn ngữ. biến và kiểu dữ liệu. Sau đó, trong mỗi bài học, bạn sẽ xây dựng kiến ​​thức, từ cấu trúc dữ liệu như mảng và bản đồ đến vòng lặp, cấu trúc điều khiển và chức năng. Cùng với kiến ​​thức cơ bản về ngôn ngữ, bạn cũng sẽ tìm hiểu một số API tích hợp chính để thao tác dữ liệu, AJAX và làm việc với trình duyệt web DOM. Cuối cùng, bạn sẽ xem qua một số API web mạnh mẽ và được sử dụng rộng rãi nhất được hỗ trợ bởi tất cả các trình duyệt hiện đại

Bài Viết Liên Quan

Php chỉ cho phép các chữ cái
Olympic Games 2024 horse riding ticket price
Pa bằng bao nhiêu?
Làm thế nào để bạn xuất bản một chương trình python?
Đặt chỉ mục Trang WordPress
In \b nghĩa là gì trong python?
Thông số kỹ thuật Chevelle SS 2024
Làm cách nào để thêm hình ảnh vào lưỡi dao trong laravel?
Đọc tệp cụ thể từ thư mục python
Làm cách nào để thêm giá trị meta trong WordPress?
Công dụng của phương thức contains() trong Laravel là gì?
Dán mà không cần định dạng phím tắt excel
Cài đặt nodejs CentOS 7
Chuỗi thay thế không gian trăn
Php bao gồm thư viện
Hợp đồng biểu diễn HTML
Trích xuất văn bản python từ chuỗi
May 5, 2024 day off
Cách kết nối Mã VS trong PHP?
Con trăn tzoffset

Toplist mới

#1
Top 4 uống nước chanh sả mật ong có tác dụng gì 2023
7 tháng trước
#2
Top 10 bài tập làm văn số 5 lớp 7 de 4 2023
7 tháng trước
#3
Top 3 vừa chơi đã có tài khoản vương giả chap 1 2023
7 tháng trước
#4
Top 6 anh sẽ on thôi cover phạm nguyên ngọc lyrics 2023
7 tháng trước
#5
Top 7 tài liệu quản lý nhà nước và quản lý ngành giáo dục đào tạo 2023
7 tháng trước
#6
Top 7 hãy ra khỏi người đó đi hợp âm 2023
7 tháng trước
#7
Top 6 giáo án thơ về thăm nhà bác 2023
7 tháng trước
#8
Top 8 giáo án ngữ văn 6 cánh diều 2023
7 tháng trước
#9
Top 9 tinh bột tham gia phản ứng nào 2023
7 tháng trước

Bài mới nhất

Bài 18 trinh bày văn bản khi in năm 2024
Cá nhân tự quyết toán thuế 2 tháng thử việc năm 2024
Tiêm vitamin k cho trẻ sơ sinh khi nào năm 2024
Tội vu khống người khác bị phạt như thế nào năm 2024
Bài tập đồng vị nâng cao có đáp án năm 2024
Top game nhẹ cho laptop cấu hình yếu năm 2024
Hệ điều hành 12.3.1 dùng cho điên thoại nào năm 2024
Quy định về sửa đổi bổ sung văn bản năm 2024
250 phạm văn đồng phường 1 q.gò vấp năm 2024
Top 10 nhân vật mạnh nhất trong fairy tail năm 2024

Chủ Đề

programming Hỏi Đáp Mẹo Hay Toplist Là gì Địa Điểm Hay mẹo hay Học Tốt Công Nghệ Nghĩa của từ Khỏe Đẹp Bao nhiêu đánh giá Top List bao nhieu bao nhiêu hướng dẫn Bài tập So Sánh Tiếng anh So sánh Xây Đựng Sản phẩm tốt Ngôn ngữ Bài Tập Máy tính javascript Ở đâu Thế nào Hướng dẫn Dịch Tại sao Đại học Món Ngon Facebook Khoa Học