- 1.Walidacja formularza
- 2.Wbudowany mechanizm
- 3.Walidacja formularza FrontEnd
- 4.Walidacja formularza BackEnd
1.Walidacja formularza
Jeszcze kilka lat temu aby zwalidować poprawność wypełnienia formularza trzeba było się trochę natrudzić. W czasach, gdy jQuery zaczynał swoją karierę w sieci powstawały dodatki, które developerowi ułatwiały walidację pól formularza wypełnionego przez użytkownika. Nigdy nie lubiłam tych dodatkowych skryptów. Były one duże, a ich wdrożenie kosztowało trochę czasu. Nie tyle co pisanie walidacji od nowa, ale jednak. W dodatku wszystko odbywało się jedynie z poziomu JS (wydzielam tutaj walidację po stronie serwera, którą zawsze należy wdrażać osobno). Podobnie jest dzisiaj, z drobną zmianą.
2.Wbudowany mechanizm
Większość przeglądarek ma już wbudowany mechanizm walidacji pól formularza. Jeśli któreś z pól określimy jako required chrome lub ff nie wyślą danych z formularza na serwer. Użytkownik otrzyma komunikat, że to pole jest wymagane i ani 1 linijka kod JS nie jest tutaj wymagana.
Mechanizm ten jest wydajny, ma jednak jedną podstawową wadę(?) UI jest przeglądarkowe. Dlaczego słowo “wadę” oznaczyłam znakiem zapytania? Tutaj należałoby się zastanowić, czy jest to faktycznie wada. Moim zdaniem warto wykorzystywać UI wbudowane, jednak nie zawsze mamy taką możliwość.
Jeśli mamy zaprojektowany graficznie formularz z przemyślaną obsługą błędów i komunikatów - znów musimy sięgnąć do js. Tym razem jednak dla mnie jest to proces bardzo przyjemny :)
Poniżej zamieszczam pełną walidację js z wykorzystaniem wbudowanego mechanizmu z przeglądarki z możliwością nadania własnego wyglądu.
3.Walidacja formularza FrontEnd [JS]
See the Pen YzPxmbJ by ejo (@ejo) on CodePen.
4.Walidacja formularza BackEnd
Potrzebny plik z podstawowymi funkcjami dla obsługi formularza po stronie serwera w PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
mb_internal_encoding("UTF-8");
function removeCRLF($str) {
return str_replace(array("\r","\n"), array(" ", " "), $str);
}
function removeHtml($str) {
return strip_tags(trim($str));
}
function getMailContent($content_base, $boundary) {
$content = "";
$content .= "$content_base\n";
return $content;
}
//Walidacja pól
$name = removeCRLF(removeHtml($_POST["name"]));
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$phone = removeHtml($_POST["tel"]);
$text = removeHtml($_POST['msg']);
$agree = removeHtml($_POST['agree']);
?>
Plik send.php do którego wysyłane są dane z naszego formularza
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<?php
mb_internal_encoding("UTF-8");
$recipient_admin = ['adresemail@domain.com'];
// Common attributes
$boundary = "__BOUNDARY__";
// Require functions
require "./functions.php";
// ------------------------------------
// Start
// ------------------------------------
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] != "POST") {
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "403 forbidden";
exit;
}
// Get the form fields and remove whitespace.
$name = removeCRLF(removeHtml($_POST["name"]));
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$phone = removeHtml($_POST["tel"]);
$text = removeHtml($_POST['msg']);
$agree = removeHtml($_POST['agree']);
// Check that data was sent to the mailer.
if (
empty($name) OR
empty($email) OR
empty($phone) OR
empty($text) OR
!$agree=='on' OR
!filter_var($email, FILTER_VALIDATE_EMAIL)
) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "400 bad request";
exit;
}
// ------------------------------------
// Start setting email headers and contents.
// ------------------------------------
// Set the email headers.
$email_headers = "";
$email_headers .= "Content-Type: text/plain; charset=\"UTF-8\"\n";
$email_headers .= "Content-Transfer-Encoding: 8bit\n";
// Build the email content.
$email_content = "";
$email_content .= "Imię i nazwisko: $name\n";
$email_content .= "Email: $email\n";
$email_content .= "Telefon: $phone\n";
$email_content .= "Zapytanie: $text\n";
// ------------------------------------
// For Admin
// ------------------------------------
// Set the recipient email address.
// FIXME: Update this to your desired email address.
// Set the email subject.
$site = "...";
$subject_admin = mb_encode_mimeheader("Formularz dla $site od: $name ", "UTF-8");
// Build the email content.
$email_content_admin = "Wypełniono formularz $site:\n\n";
$email_content_admin .= $email_content;
$email_content_admin = getMailContent($email_content_admin, $boundary);
// Build the email headers.
$email_headers_admin = '';
$email_headers_admin .= $email_headers;
$email_headers_admin .= "From: ". mb_encode_mimeheader($name, "UTF-8"). " <$email>";
// ------------------------------------
// Send Mail
// ------------------------------------
if (
mail(
implode(',', $recipient_admin),
$subject_admin,
$email_content_admin,
$email_headers_admin)
) {
// Set a 200 (okay) response code.
http_response_code(200);
} else {
// Set a 500 (internal server error) response code.
http_response_code(500);
}
?>