Trong hướng dẫn này tôi sẽ đi qua các bước để tạo ra một form liên hệ, tận dụng framework front-end phổ biến nhất, Bootstrap, kết hợp với AJAX và PHP. Từ đó chúng ta có thể khám phá một số tính năng bổ sung như một số hiệu ứng động CSS ưa thích với animate.css, kiểm tra xác nhận thêm trong JavaScript và tinh chỉnh các trải nghiệm người dùng với nội dung không đồng bộ. Show Tại thời điểm viết Bootstrap 3.3.5 là phiên bản mới nhất, và lưu ý là chúng ta đang sử dụng một bộ mặc định của Bootstrap (với một layout 12 cột) cho hướng dẫn này. Khi làm theo, hãy chắc chắn rằng bạn sử dụng các đoạn code và cấu trúc code mới nhất như trong tài liệu Bootstrap. Cấu trúc tập tin và thư mụcTrước hết, chúng ta cần tạo ra một thư mục gốc và bao gồm các tập tin và thư mục sau đây: Bootstrap-Form:
├── css/
├── images/
├── js/
├── scripts.js
├── php/
├── process.php
├── index.htmlChúng ta sẽ cần phải bao gồm một số thư viện front-end để giúp chúng ta, hãy tải về (hoặc tham khảo bên ngoài) như sau:
Đặt các thư viện này vào trong thư mục, để cấu trúc tập tin trở thành: Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── php/
├── process.php
├── index.htmlXây dựng Form cơ bảnMở tập tin <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
1, sao chép cấu trúc HTML cơ bản sau: <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
Đây là mẫu html cơ bản của chúng ta, trong đó chúng ta sẽ xây dựng nội dung cho form. Bạn có thể thấy chúng ta đã liên kết tất cả các CSS và các tập tin JavaScript cần thiết (lưu ý chúng ta không thực sự cần bootstrap.js cho ví dụ cụ thể này). Chúng ta bao gồm một thẻ meta viewport để giúp trợ giúp cho Media Queries của chúng ta trong Bootstrap. JavaScript đã được đặt ở dưới cùng của tập tin để giúp cung cấp nội dung cốt lõi đầu tiên. Trong thẻ body, chúng ta bao gồm một div với một lớp <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
2. Điều này về cơ bản có nghĩa là trong viewport <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
3 (nhỏ) của chúng ta và lớn hơn chúng ta muốn hiển thị một cột rộng 50% (có tối đa là 12 cột). Lớp <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
4 đại diện cho một margin-left là 25%, từ đó tạo ra một layout chiếm một nửa viewport có sẵn và canh giữa theo chiều ngang. Từ đây, chúng ta bao gồm một <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
5 và bắt đầu những cái cơ bản cho form của chúng ta. Hãy chắc chắn áp dụng một ID vào form này để chúng ta có thể gắn nó với một sự kiện jQuery sau này. Không có can đảm, không có vinh quangĐể xây dựng nội dung của form chúng ta có thể sao chép/dán hoặc viết code sau đây vào bên trong các thẻ <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
6:<div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
Đây là tất cả các input và các button mà người dùng sẽ tương tác. Thẻ <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
7 ban đầu với lớp <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
8 là cú pháp Bootstrap cổ điển, đại diện cho một nhóm của các phần tử col nằm ngang. Các cột bên trong Bootstrap tạo padding hoặc gutter—thêm một hàng xung quanh những cái này sẽ loại bỏ padding ở bên trái và bên phải giúp chúng vừa hoàn toàn với container của chúng.
Chúng ta đã tạo ra hai cột với lớp <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
9 (50%) mà chúng ta sẽ sử dụng để chia tách form của chúng ta. Bên trong <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
9 đầu tiên, chúng ta tạo ra một label và trường cho name, thứ hai là cho email. Mỗi cái bao gồm một lable với một thuộc tính <div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
1 thích hợp để nó có thể chọn trường liên quan. Mỗi cột này bao gồm một <div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
2 để nhóm label và trường lại với nhau và áp dụng một margin nhỏ vào phía dưới.TypographyBootstrap cho phép bạn sử dụng các lớp typography từ H1-H6. Những lớp này giúp chúng ta định phong cách các phần tử trực tiếp mà không cần thêm margin phụ hoặc tạo ra các phần tử khối. Chúng ta sử dụng một H4 để nhanh chóng định phong cách các label làm cho chúng lớn và rõ ràng. Lớp <div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
3 áp dụng cho mỗi input cho phép nó mở rộng chiếm toàn bộ chiều dài của container (width 100%). Nó cũng áp dụng phong cách khác nhau để giúp xây dựng một phần tử form dễ đọc (chiều cao lớn hơn, border phẳng vv). Sau các cột này chúng ta bao gồm thân của thông điệp. Một lần nữa, chúng ta bao quanh cái này trong một <div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
2 và áp dụng các phong cách tương tự vào khu vực label và văn bản của chúng ta như chúng ta đã làm trước đây. Phần Call to ActionCuối cùng chúng ta bao gồm nút submit. Bootstrap có một số lớp cho màu sắc/trạng thái của các button và typography khác nhau. Chúng ta đã chọn sử dụng button "success" ( <div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
5) mà là, theo mặc định, màu xanh lá cây. Ngoài ra chúng ta cần phải áp dụng lớp <div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
6 cơ sở để thiết lập lại các tính năng cơ bản của button (border, padding, text-align, font-weight). Chúng ta áp dụng một lớp <div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
7 làm cho nó lớn hơn một chút và cuối cùng là một lớp <div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
8 đẩy button về bên phải.Sau khi đã có button của chúng ta, chúng ta bao gồm một div với id <div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
9 và áp dụng các lớp sau đây: "$("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
0". Các h3 giúp tạo ra một heading lớn hơn, $("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
1 (có thể bạn đã hình dung được) canh văn bản vào giữa, và cuối cùng chúng ta thiết lập lớp $("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
2 trong đó display thành none và visibility thành hidden.Thêm hàm submitNhư bạn có thể thấy bằng cách xem cái này trong trình duyệt ưa thích của bạn, chúng ta đã tạo ra một form Bootstrap cơ bản. Tuy nhiên nó chưa thực sự làm bất cứ điều gì cả. Bước tiếp theo sẽ là tạo ra hàm trong đó lấy các input của người dùng và gởi chúng một cách không đồng bộ đến mailer của PHP. Mở $("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
3 sao chép đoạn code sau:$("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
Một ít code này là một đoạn jQuery chịu trách nhiệm lắng nghe một hành động submit trên id $("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
4 của chúng ta (như đã thiết lập). Dựa theo hàm này, chúng ta phân tích một biến $("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
5 lưu trữ hành động submit form vào hàm. Hàm $("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
6 ngăn hành vi bình thường của form, mà sẽ là làm mới lại trang, vì action của form không được thiết lập. Cuối cùng, nó gọi hàm $("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
7.submitForm();Tiếp theo chúng ta xây dựng hàm $("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
7 như sau:function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
Ba biến được gán giá trị của mỗi input từ form và gán chúng cho một biến JavaScript được sử dụng sau này. Chúng ta khởi tạo một đối tượng AJAX trong jQuery và thiết lập các thông số type thành $("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
9, URL đến vị trí tập tin PHP, dữ liệu chúng ta muốn gửi và hàm callback khi thành công. Dữ liệu bao gồm cả ba biến nối liền với một id/label liên quan. Hàm callback success được gọi khi đối tượng AJAX nhận thông tin trả về từ PHP một cách thành công. Hàm sẽ lấy văn bản trả về và kiểm tra xem nó có trùng với chuỗi "success" hay không. Nếu thành công nó kích hoạt hàm cuối cùng function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
0.Hàm function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
0 loại bỏ lớp hidden khỏi div <div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
9 mà chúng ta áp dụng trước đó, từ đó hiển thị văn bản.Gắn nó vào hàm mail của PHPCuối cùng, chúng ta cần viết một script PHP để nhận dữ liệu và gửi nội dung của chúng ta thông qua một hàm email sẵn có của PHP. Mở function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
3 và bao gồm các code sau đây:<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$EmailTo = "";
$Subject = "New Message Received";
// prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success){
echo "success";
}else{
echo "invalid";
}
?>
Tương tự như đoạn code jQuery trước đó, chúng ta cần phải thu thập và lưu trữ các biến mà chúng ta muốn sử dụng. Từ hàm post chúng ta có thể thu thập ba biến đầu vào và gán cho tên biến tương tự trong PHP. Biến function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
4 là một địa chỉ email được xác định trước đó mà bạn có thể thiết lập trong script để gửi đến email của bạn khi form được submit. function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
5 là một chuỗi bạn muốn sử dụng như là chủ đề email. Thân của email được xây dựng xung quanh ba biến đã được xác lập. Thứ nhất thiết lập một số văn bản mô tả như "Name:", sau đó biến, sau đó một dòng mới được xác định bởi function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
6 (dòng mới/ngắt dòng). Điều này được lặp đi lặp lại và nối vào biến function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
7.Đến cuối cùng gửi email mà chúng ta đính kèm nó trong hàm mail. Gán vào biến function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
8 mà chúng ta bao gồm địa chỉ email đang được gửi, chủ đề, phần thân và địa chỉ email nguồn.Để bắt đầu quá trình gửi email chúng ta có thể gọi nó bên trong một câu lệnh function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
9. Điều này cũng giúp kiểm tra xem nó là một thành công hay không. Nếu hàm mail trả về "true" thì script sẽ trả về "success", nếu không thành công sẽ trả về "invalid".Kết quả này sẽ được trả về cho đối tượng AJAX và xử lý trở lại trên phía client. Cái hay của AJAX là tất cả những điều này được thực hiện không đồng bộ ở phía client, cho phép người dùng tiếp tục sử dụng trang web trong khi nó đang được gửi đi. Cải tiến formChúng ta đã khái quát cấu trúc cơ bản và hàm của form trong nửa đầu của hướng dẫn này, chúng ta sẽ đi vào vấn đề cung cấp thông tin phản hồi cho người dùng thông qua các tính năng bổ sung khác nhau mà chúng ta có thể bao gồm. Cụ thể, chúng ta sẽ khái quát phản hồi form thông qua xử lý lỗi cả ở phía client và phía server. Một lần nữa, để giúp cho quá trình thiết lập xác nhận form, chúng ta sẽ sử dụng một số công cụ. Chúng bao gồm:
Thêm các thành phần này vào trong dự án như chúng ta đã làm với Bootstrap và jQuery trước đó. Những công cụ này sẽ giúp cung cấp thông tin phản hồi cho người dùng khi họ submit form. Có rất nhiều công cụ xác nhận form và các framework hiện có (bao gồm cả xác nhận bằng HTML5), nhưng tôi đã sử dụng "Bootstrap Validator" vì nó kết hợp hài hòa với form hiện tại của chúng ta. Cơ cấu của dự án bây giờ sẽ giống như thế này: Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── animate.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── validator.min.js
├── php/
├── process.php
├── index.htmlXác nhận Form của chúng taHãy bắt đầu bằng cách khởi tạo validator để kiểm tra form một khi chúng submit. Quay trở lại với tập tin $("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
3 của chúng ta, chúng ta cần phải chỉnh sửa đoạn code đầu tiên gọi đến hàm <?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$EmailTo = "";
$Subject = "New Message Received";
// prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success){
echo "success";
}else{
echo "invalid";
}
?>
1 khi form được submit. Chúng ta cần phải cập nhật nó với code sau đây: $("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
Đoạn code mới này kiểm tra xem Bootstrap Validator có tìm thấy một vấn đề gì không và không cho nó xử lý tiếp. Nếu không, chúng ta tiếp tục như bình thường. Chúng ta vẫn cần phải ngăn chặn hành vi mặc định (tải lại trang) khi submit form thành công, vì vậy hãy giữ lại nó. Nhấp submit trên form của chúng ta khi nó không được điền vào đầy đủ sẽ dẫn đến các trường bị rỗng được làm nổi bật bằng màu đỏ chỉ ra rằng chúng cần phải được điền vào, thật dễ dàng! Trong quá trình thêm xác nhận này, chúng ta đã loại bỏ hoặc ngăn chặn xác nhận bằng HTML5. Chúng ta có thể thêm ngữ cảnh vào xác nhận của chúng ta bằng cách bao gồm các thông báo lỗi. Bootstrap Validator có một tính năng tiện lợi để các thông báo lỗi cho mỗi input hiển thị một cách liền mạch. Để thêm những cái này chúng ta cần thêm một số HTML nữa để cung cấp một nơi cho chúng hiển thị. Trong mỗi form-group bên dưới input, chúng ta sẽ đặt html sau đây: <div class="help-block with-errors"></div> Ví dụ, đây là div vừa được thêm vào trường Name và Email: Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── php/
├── process.php
├── index.html0Submit lại form ngay bây giờ sẽ hiển thị thông báo lỗi mặc định khi các trường bị bỏ trống "Please fill in this field.". Bằng cách thêm một data-attribute vào input gọi là " <?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$EmailTo = "";
$Subject = "New Message Received";
// prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success){
echo "success";
}else{
echo "invalid";
}
?>
2" bạn có thể bao gồm một thông báo lỗi tùy biến. Ví dụ:Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── php/
├── process.php
├── index.html1Có rất nhiều tính năng khác như biểu thức chính quy mà Bootstrap Validator chấp nhận. Bạn có thể xem thêm trên Github.Có rất nhiều tính năng khác như biểu thức chính quy mà Bootstrap Validator chấp nhận. Bạn có thể xem thêm trên Github. Thêm hiệu ứng độngViệc xác nhận phía client của chúng ta trông khá tốt; chúng ta làm nổi bật trên các trường rỗng. Tuy nhiên, sẽ hay hơn nếu thêm hiệu ứng động vào form và thêm các thông điệp để cho người dùng biết những gì đang xảy ra. Hiện tại chúng ta có một thông báo "Message Submitted!" xuất hiện khi thành công, nhưng một lỗi thì sao? Để sử dụng code hiện có và làm cho các script của chúng ta có thể tái sử dụng hơn một chút, chúng ta sẽ sửa đổi các thông báo thành công hiện có để cũng chấp nhận các lỗi. Trước tiên, chúng ta hãy loại bỏ thông báo "Message Submitted!" khỏi HTML và chỉ để lại một <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
7 rỗng:Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── php/
├── process.php
├── index.html2Bây giờ chúng ta sẽ cần phải tạo ra một hàm mới để xử lý trạng thái tin nhắn. Thêm hàm này vào dưới cùng của $("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
3Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── php/
├── process.php
├── index.html3Chức năng này có hai đối số. <?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$EmailTo = "";
$Subject = "New Message Received";
// prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success){
echo "success";
}else{
echo "invalid";
}
?>
5 sẽ là một biến Boolean: nếu nó true nó sẽ là một thông báo thành công, false sẽ là một thông báo lỗi. <?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$EmailTo = "";
$Subject = "New Message Received";
// prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success){
echo "success";
}else{
echo "invalid";
}
?>
6 sẽ là thông báo mà chúng ta sẽ hiển thị trong <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
7 trên màn hình. Trước tiên, hàm sẽ kiểm tra xem nó xử lý một thông báo thành công hay một lỗi bằng cách kiểm tra giá trị của valid. Trong cả hai trường hợp nó thiết lập biến của lớp với các lớp CSS thích hợp (chúng ta cần phải bao gồm lại <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
5 và $("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
1 vì chúng ta sẽ loại bỏ những cái này mặc định sau này trong hàm.) Lưu ý: chúng ta đang sử dụng một số lớp của animate.css cho thông báo thành công. Hiệu ứng động Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── animate.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── validator.min.js
├── php/
├── process.php
├── index.html0 sẽ được kích hoạt khi thành công. Cuối cùng, hàm sẽ loại bỏ tất cả các lớp khỏi <div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
9 (tránh đụng độ lớp), sau đó thêm các lớp đằng trước, và sau đó thêm thông điệp bên trong <!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
7.Bên trong khởi tạo Validator mà chúng ta cập nhật lúc bắt đầu của phần này, chúng ta có thể gọi hàm bên trong câu lệnh function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
9 khi nó true.Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── php/
├── process.php
├── index.html4Submit form với các trường rỗng sẽ hiển thị thông báo lỗi "Did you fill in the form properly?" Một trong những bước cuối cùng cho hàm submitMSG mới này là gọi nó khi form của chúng ta thành công. Cập nhật hàm Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── animate.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── validator.min.js
├── php/
├── process.php
├── index.html4 như sau:Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── php/
├── process.php
├── index.html5Trước hết chúng ta muốn thiết lập lại form và xoá các giá trị khi thành công, sau đó gọi hàm Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── animate.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── validator.min.js
├── php/
├── process.php
├── index.html5 của chúng ta như trước đây với một thông báo thành công. Submit form thành công sẽ hiển thị thông báo thành công với một hiệu ứng Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── animate.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── validator.min.js
├── php/
├── process.php
├── index.html0 của Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── animate.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── validator.min.js
├── php/
├── process.php
├── index.html7.Lắc nóThêm một hiệu ứng động, phải không? Hãy thêm một hiệu ứng động khác cho toàn bộ form khi lỗi, một hiệu ứng "lắc" sẽ là rất tuyệt! Tạo một hàm mới chỉ sau Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── animate.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── validator.min.js
├── php/
├── process.php
├── index.html4 và gọi nó là Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── animate.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── validator.min.js
├── php/
├── process.php
├── index.html9Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── php/
├── process.php
├── index.html6 Hàm này sử dụng một cách tiếp cận thường thấy trên trang demo animate.css cho phép chúng ta thêm một hiệu ứng động vào một phần tử và sau đó lại gọi/thêm nó hết lần này đến lần khác. Hiệu ứng động CSS có một vấn đề khó chịu trong đó một khi chúng được kích hoạt một lần chúng có xu hướng không kích hoạt được nữa, ngay cả khi lớp được loại bỏ và thêm lại. Hàm này sẽ giúp thiết lập lại các lớp vào cuối của hiệu ứng, cho phép bạn thêm lại chúng một lần nữa. Khi người dùng nhấp submit trên một form chưa hoàn tất, chúng ta muốn hiệu ứng động $("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
0 được kích hoạt. Và nếu họ submit nó một lần nữa thì nó vẫn lỗi, nó cần được kích hoạt thêm một lần nữa.submit trên một form chưa hoàn tất, chúng ta muốn hiệu ứng động $("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
0 được kích hoạt. Và nếu họ submit nó một lần nữa thì nó vẫn lỗi, nó cần được kích hoạt thêm một lần nữa.Chúng ta có thể gọi hàm này là Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── animate.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── validator.min.js
├── php/
├── process.php
├── index.html9 ở bên trên hàm $("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
2 mà chúng ta đã tạo cho một thông báo lỗi. Ví dụ:Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── php/
├── process.php
├── index.html7Bây giờ khi chúng ta submit một form rỗng, nó sẽ lắc để cho người dùng biết một cái gì đó đã sai. Thêm xác nhậnTất cả các xác nhận phía client này là tốt, tuy nhiên người dùng có thể vô hiệu hóa các biện pháp và submit form với các trường bị bỏ trống bằng cách chỉnh sửa code trong trình duyệt của họ. Luôn luôn cần thiết khi tạo một số xác nhận phía server, để nắm bắt bất cứ điều gì được truyền qua. Mở tập tin function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
3, chúng ta cần phải thực hiện một số thay đổi này để kiểm tra nếu các trường là rỗng; nếu không, gửi lại một thông báo tới front-end. Chúng ta sẽ tạo ra một biến gọi là $("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
4 để nắm bắt các thông báo lỗi của chúng ta và sau đó bao gồm xác nhận $("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
5. Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── php/
├── process.php
├── index.html8PHP này sẽ kiểm tra xem chúng có rỗng không trước khi thiết lập chúng như các biến tương ứng (thay thế code thiết lập các biến hiện có từ $("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
5). Nếu chúng rỗng, thì chúng ta sau đó thiết lập một thông báo cơ bản để gửi lại cho client. Chúng ta có thể làm nhiều hơn thay vì chỉ xác nhận các trường rỗng (Nếu nó quá ngắn/dài thì kiểm tra nó bằng biểu thức chính quy, vv) trong PHP và JavaScript. Tuy nhiên, để đơn giản, chúng ta sẽ hạn chế nó chỉ với các trường rỗng.Chúng ta cần gửi lại thông báo lỗi đến AJAX ban đầu để được hiển thị trong trình duyệt. Chúng ta sẽ sửa câu lệnh function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
9 mà chúng ta đã tạo ra trước đó ở dưới cùng của tập tin PHP.Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── php/
├── process.php
├── index.html9Trong câu lệnh function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
9, chúng ta cũng kiểm tra xem $("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
4 có rỗng hay không ( "" ) cùng với trạng thái của hàm mail sẵn có mà chúng ta sử dụng trên biến function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
8. Trong điều kiện <div class="help-block with-errors"></div>1, chúng ta đã bao gồm thêm một kiểm tra. Điều này chỉ kiểm tra xem lỗi có phải là kết quả từ thất bại của function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
8 hay không, nếu có thì gửi lại "Something went wrong :(". Ngược lại, chúng ta hiển thị thông báo đã được biên dịch khi chúng ta kiểm tra cho các giá trị rỗng.Một bước cuối cùng là chấp nhận thông báo mới này trong AJAX và hiển thị nó trên form. Chúng ta cần cập nhật đối tượng AJAX trong tập tin $("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
3 như sau:<!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
0Chúng ta vừa mới cập nhật điều kiện <div class="help-block with-errors"></div>1 để kiểm tra xem nếu <div class="help-block with-errors"></div>5. Trong <div class="help-block with-errors"></div>1 của chúng ta, chúng ta gọi hàm Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── animate.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── validator.min.js
├── php/
├── process.php
├── index.html9 mà sẽ áp dụng hiệu ứng động shake và chúng ta yêu cầu hàm $("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
2 để hiển thị văn bản trả về từ PHP. Văn bản trả về sẽ là "Something went wrong :(" hoặc các trường mà nó nhận là rỗng.Tổng kếtHãy tìm đến Github để tìm hiểu toàn bộ code mà chúng ta đã viết rất nhiều! Form của chúng ta bây giờ sẽ cung cấp cho người dùng một số phản hồi khi trường không hợp lệ thông qua xác nhận. Chúng ta cung cấp các thông báo theo ngữ cảnh dựa trên trạng thái và thông báo trả về từ PHP, và thực hiện thêm một lớp xác nhận trên server để bắt lỗi khi người dùng bỏ qua việc xác nhận trên front-end. Nói chung bây giờ bạn đã có một form liên lạc sẵn sàng để định phong cách và tích hợp vào trang web của bạn. Tôi hy vọng bạn thích hướng dẫn này, xin vui lòng để lại câu hỏi hoặc những suy nghĩ của bạn trong phần bình luận dưới đây nhé! |
