Bangun Formulir Kontak yang Didukung HTML5 Rapi

() translation by (you can also view the original English article)

Dalam tutorial ini, kita akan belajar cara membuat formulir kontak bertenaga HTML5 AJAX yang mewah. Formulir akan menggunakan beberapa elemen dan atribut masukan HTML5 baru, dan akan divalidasi menggunakan validasi bentuk bawaan browser.

Kami akan menggunakan jQuery dan Modernizr untuk membantu dengan browser yang lebih lama, dan PHP di sisi server untuk memvalidasi input.

Langkah 1: Memulai

Untuk memulai, kita perlu mengatur direktori dan file kita. Untuk memulai, saya sangat merekomendasikan boilerplate HTML5. Ini adalah titik awal yang sangat bagus untuk setiap proyek HTML5 dan akan menghemat banyak waktu. Untuk tutorial ini saya memilih 'BOILERPLATE CUSTOM'.

Untuk informasi lebih lanjut tentang boilerplate HTML5, lihat panduan ini di Nettuts +.

Setelah diunduh dan dibongkar, hapus semuanya kecuali folder index.html dan css dan js. Saya juga menambahkan folder bernama img dan file PHP yang disebut process.php. Kami akan menggunakan folder img untuk menyimpan aset gambar untuk formulir kami, dan process.php untuk menangani semua logika sisi server untuk formulir kontak. Inilah struktur direktori saya seperti sekarang:

Hanya itu yang kita butuhkan untuk memulai! HTML5 boilerplate menyertakan pengaturan ulang CSS yang mengagumkan dengan default yang masuk akal dan menyertakan semua pustaka JS (jQuery & Modernizr) yang akan kita gunakan hari ini. Semua file JS dan file CSS kami telah terhubung dalam file index. Sekarang, saatnya beralih ke markup.

Langkah 2: Formulir

Buka index.html, dan hapus semuanya dalam elemen #container. Kami akan menempatkan formulir kontak kami di dalam div ini:

<div id="contact-form" class="clearfix">
    <h1>Get In Touch!</h1>
    <h2>Fill out our super swanky HTML5 contact form below to get in touch with us! Please provide as much information as possible for us to help you with your enquiry :)</h2>
    <ul id="errors" class="">
        <li id="info">There were some problems with your form submission:</li>
    </ul>
    <p id="success">Thanks for your message! We will get back to you ASAP!</p>
    <form method="post" action="process.php">
        <label for="name">Name: <span class="required">*</span></label>
        <input type="text" id="name" name="name" value="" placeholder="John Doe" required="required" autofocus="autofocus" />
        
        <label for="email">Email Address: <span class="required">*</span></label>
        <input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />
        
        <label for="telephone">Telephone: </label>
        <input type="tel" id="telephone" name="telephone" value="" />
        
        <label for="enquiry">Enquiry: </label>
        <select id="enquiry" name="enquiry">
            <option value="general">General</option>
            <option value="sales">Sales</option>
            <option value="support">Support</option>
        </select>
        
        <label for="message">Message: <span class="required">*</span></label>
        <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
        
        <span id="loading"></span>
        <input type="submit" value="Holla!" id="submit-button" />
        <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
    </form>
</div>

Ini semua HTML yang kami butuhkan untuk formulir kami. Mari kita lihat masing-masing bagian:

ul#errors and p#success akan menjadi pemegang pesan kesalahan dan kesuksesan kami. Kami akan menyembunyikan ini secara default dengan CSS, dan menampilkannya dengan JavaScript atau PHP setelah formulir dikirim. Untuk input nama, satu-satunya persyaratan kami adalah bahwa ini telah diisi.

Di HTML5, kami melakukan ini dengan menambahkan atribut 'required'. Ini akan memaksa browser untuk memeriksa bahwa bidang ini memiliki sesuatu di dalamnya sebelum memungkinkan formulir untuk dikirimkan. Bidang email serupa, tetapi juga diperlukan, kami benar-benar ingin memastikan itu adalah alamat email yang dimasukkan. Untuk melakukan ini, kami menetapkan jenis masukan ini sebagai email, yang baru di HTML5. Meskipun telepon bukan bidang wajib, kami menggunakan jenis masukan HTML5 tel untuk ini.

Penyelidikan adalah elemen select standar, dan pesan adalah textarea khas - tidak ada yang baru di sini. Untuk textarea, kami akan mengatur atribut yang diperlukan untuk memastikan pengguna memasukkan beberapa teks.

Di HTML5, ada atribut baru untuk textareas disebut maxlength. Ya, Anda dapat menebaknya, ini memungkinkan kami menetapkan jumlah karakter maksimum yang dapat kami tulis di textarea. Untuk beberapa alasan bodoh, kekuatan yang membuat spesifikasi HTML5 tidak berpikir kita akan membutuhkan atribut minlength (seperti yang kita lakukan sekarang) dan tidak ada atribut untuk ini. Jadi sebagai atribut minlength darurat, kita akan menggunakan atribut HTML5 baru lainnya yang disebut atribut data khusus. Ini pada dasarnya adalah nama atribut yang diawali dengan kata 'data-'. Dalam kasus kami, kami telah memilih min-panjang data yang tepat. Ini memungkinkan kita pada dasarnya membuat atribut kita sendiri.

Hal lain yang patut diperhatikan adalah bahwa kita menetapkan atribut yang disebut placeholder pada semua elemen input (kecuali telepon) dan textarea. Ini adalah atribut masukan HTML5 baru. Ketika formulir pertama kali ditampilkan, teks placeholder akan muncul di input, biasanya dalam warna font yang berbeda. Kemudian, ketika Anda memfokuskan input, teks placeholder menghilang. Jika Anda kabur tanpa mengisi bidang, teks placeholder dimasukkan kembali. Ini adalah efek yang cukup keren, dan dapat memberi pengguna sedikit informasi tentang apa yang perlu mereka lakukan. Sebelumnya, ini harus dilakukan dengan JavaScript.

Hal terakhir yang perlu diperhatikan adalah bahwa input nama memiliki atribut HTML5, yang disebut autofocus. Ketika halaman pertama dimuat, elemen input ini diberikan fokus segera tanpa pengguna harus melakukan apa-apa. Ini juga bagus untuk mendorong pengguna melakukan sesuatu.

Itulah semua HTML5-an yang akan kami masukkan ke dalam markup kami. Untuk informasi lebih rinci tentang atribut-atribut baru ini dan masukan, periksa beberapa tautan ini:

Langkah 3: Pasang Formulir

Ini formulir kami, terlihat sedikit lebih buruk untuk dipakai ...

Ini tidak terlihat terlalu bagus saat ini, dan itu tidak benar-benar melakukan kebaikan HTML5 baru yang mengilap keadilan apa pun, jadi mari kita tambahkan beberapa CSS. Buka file style.css. File sudah berisi beberapa pengaturan ulang dan default yang akan membantu kami membuat bentuk x-browser kami kompatibel. Gulir ke bawah dan cari komentar yang mengatakan:

1	/*
2	// ========================================== \\
3	\|\| \|\|
4	\|\| Your styles ! \|\|
5	\|\| \|\|
6	\\ ========================================== //
7	*/

Langsung setelah itu, tempelkan CSS berikut:

#contact-form {
    background-color:#F2F7F9;
    width:465px;
    padding:20px;
    margin: 50px auto;    
    border: 6px solid #8FB5C1;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    position:relative;
}

#contact-form h1 {
    font-size:42px;
}

#contact-form h2 {
    margin-bottom:15px;
    font-style:italic;
    font-weight:normal;
}

#contact-form input, 
#contact-form select, 
#contact-form textarea, 
#contact-form label {
    font-size:15px;
    margin-bottom:2px;
}

#contact-form input, 
#contact-form select, 
#contact-form textarea {
    width:450px;
    border: 1px solid #CEE1E8;
    margin-bottom:20px;
    padding:4px;
}

#contact-form input:focus, 
#contact-form select:focus, 
#contact-form textarea:focus {
    border: 1px solid #AFCDD8;
    background-color: #EBF2F4;
}

#contact-form textarea {
    height:150px;
    resize: none;
}

#contact-form label {
    display:block;
}

#contact-form .required {
    font-weight:bold;
    color:#F00;    
}

#contact-form #submit-button {
    width: 100px;
    background-color:#333;
    color:#FFF;
    border:none;
    display:block;
    float:right;
    margin-bottom:0px;
    margin-right:6px;
    background-color:#8FB5C1;
    -moz-border-radius:8px;
}

#contact-form #submit-button:hover {
    background-color: #A6CFDD;
}

#contact-form #submit-button:active {
    position:relative;
    top:1px;
}

#contact-form #loading {
    width:32px;
    height:32px;
    background-image:url(../img/loading.gif);
    display:block;
    position:absolute;
    right:130px;
    bottom:16px;
    display:none;
}

#errors {
    border:solid 1px #E58E8E;
    padding:10px;
    margin:25px 0px;
    display:block;
    width:437px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    background:#FFE6E6 url(../img/cancel_48.png) no-repeat 405px center;
    display:none;
}

#errors li {
    padding:2px;
    list-style:none;    
}

#errors li:before {
    content: ' - ';    
}

#errors #info {
    font-weight:bold;
}

#errors #info:before {
    content: '';    
}

#success {
    border:solid 1px #83D186;
    padding:25px 10px;
    margin:25px 0px;
    display:block;
    width:437px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    background:#D3EDD3 url(../img/accepted_48.png) no-repeat 405px center;
    font-weight:bold;
    display:none;
}

#errors.visible, #success.visible {
    display:block;    
}

#req-field-desc {
    font-style:italic;
}

/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}

/* Normalize placeholder styles */

/* chrome, safari */
::-webkit-input-placeholder {
    color:#CCC;
    font-style:italic;
}

/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
    color:#CCC;
    font-style:italic;
}

/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text  { 
    color:#CCC;
    font-style:italic;
}

Jika Anda menyimpan dan memuat ulang, sekarang halaman Anda akan terlihat seperti ini:

Sekarang itu terlihat lebih baik! CSS cukup standar, tetapi saya akan membahas beberapa hal yang tidak begitu jelas:

1	#errors li:before {
2	content: ' - ';
3	}

Ini akan menempatkan tanda di samping pesan validasi kesalahan kami. Ini pada dasarnya menggantikan titik peluru dalam daftar, saya hanya berpikir ini terlihat lebih baik.

1	#contact-form #submit-button:active {
2	position:relative;
3	top:1px;
4	}

Ini akan memberi kita efek 'push-down' yang bagus ketika tombol submit aktif.

input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}

Semua browser (kecuali IE) secara default menempatkan bayangan kotak merah di sekitar elemen yang dibutuhkan. Ini terlihat sedikit di atas menurut pendapat saya, jadi saya menghapusnya. Saya telah mengindikasikan bahwa bidang diperlukan dengan meletakkan tanda bintang merah di label.

/* chrome, safari */
::-webkit-input-placeholder {
    color:#CCC;
    font-style:italic;
}

/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
    color:#CCC;
    font-style:italic;
}

/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text  { 
    color:#CCC;
    font-style:italic;
}

Ini menormalkan tampilan teks placeholder pada input dan textareas. Di sini kita membuatnya menjadi abu-abu terang dan mencetak miring. Ini akan memberi kita konsistensi di semua browser kecuali Opera, yang tidak mendukung gaya placeholder. IE tidak mendukung atribut placeholder. Fullstop. Kami akan menggunakan JavaScript ke polyfill ini. Anda dapat membaca lebih lanjut tentang menata bentuk HTML5 dengan CSS (2.1 + 3) di sini.

Anda akan melihat di CSS bahwa ada beberapa referensi ke gambar. Jika Anda tidak memilikinya, cukup unduh file sumber untuk tutorial ini dan salinlah.

Kami selesai dengan markup, dan itu terlihat sangat manis. Kita akan membuat fallback PHP jika browser pengguna tidak mendukung atribut input form baru (IE), atau jika pengguna telah menonaktifkan JavaScript. Kami akan menulis beberapa JavaScript nanti untuk meng-polyfill fitur-fitur yang tidak dimiliki browser. Tetapi jika pengguna tidak memiliki browser atau JavaScript baru yang bagus dan berkilau, kami masih perlu memvalidasi pengiriman formulir. Kami akan melakukan serveride ini dengan PHP. Kami juga akan menggunakannya untuk mengirimi kami hasil formulir yang valid kepada kami.

Langkah 4: Mempersiapkan Untuk Validasi Sisi Server

Mari kita langsung menyelam. Buka proses.php dan tempelkan yang berikut ini:

<?php
if( isset($_POST) ){
    
    //form validation vars
    $formok = true;
    $errors = array();
    
    //sumbission data
    $ipaddress = $_SERVER['REMOTE_ADDR'];
    $date = date('d/m/Y');
    $time = date('H:i:s');
    
    //form data
    $name = $_POST['name'];    
    $email = $_POST['email'];
    $telephone = $_POST['telephone'];
    $enquiry = $_POST['enquiry'];
    $message = $_POST['message'];
    
    //form validation to go here....
    
}

Apa yang kami katakan di sini adalah: hanya menjalankan kode berikut ini ketika metode permintaan adalah POST. Secara default, jika formulir diposkan ke skrip PHP, nilai input formulir disimpan dalam larik super global yang disebut $ _POST Jika tidak ada yang diposting, $ _POST tidak akan berupa array, pernyataan if akan menyamakan false dan kode kita tidak akan dijalankan.

Setelah kami menetapkan bahwa ini adalah permintaan POST, kami dapat memulai logika pemrosesan formulir kami. Hal pertama yang perlu kita lakukan adalah mengatur dua variabel:

$formok: Nilai boolean yang bisa kita periksa untuk melihat apakah formulir valid atau tidak di bagian akhir skrip.
$errors: Array yang akan kita gunakan untuk menyimpan semua masalah dengan form, karena kita memvalidasinya.

Setelah itu, kami menetapkan beberapa data pengiriman formulir umum:

$ipaddress: Alamat IP pengguna yang dapat berguna untuk memasukkan spam ke daftar hitam, data analitik referensi silang, dll.
$date: Tanggal saat formulir dikirim. Kami menggunakan fungs date untuk menghasilkan tanggal dalam format UK.
$time: Waktu saat formulir dikirimkan. Kami menggunakan fungsi tanggal untuk menghasilkan waktu.

Kita bisa menggabungkan tanggal dan waktu jika kita menginginkan:

1	$datetime = date('d/m/Y H:i:s');

Saya ingin membuat mereka terpisah sehingga saya dapat menggunakannya untuk hal-hal lain, jika diperlukan. Kumpulan variabel terakhir yang kami tetapkan adalah nilai dari kolom formulir yang dikirimkan. Kami mengakses array $_POST dengan meneruskan nama kolom formulir sebagai kunci untuk mengambil data untuk setiap variabel.

Langkah 5: Memvalidasi Data $ _POST

Kami akan memeriksa setiap variabel secara terpisah sekarang untuk memastikan nilainya valid. Jika tidak, kami akan menetapkan variabel $formok menjadi false, dan menyimpan pesan kesalahan dalam array $error. Kami akan mulai dengan bidang nama pertama.

//validate name is not empty
if(empty($name)){
    $formok = false;
    $errors[] = "You have not entered a name";
}

Di sini, kami hanya memastikan bahwa $name sebenarnya memiliki nilai. Jika tidak, artinya pengguna tidak memasukkan nama. Kami menggunakan fungsi empty() untuk memeriksa ini. The [] setelah $ errors adalah shortcut ke array_push (yang digunakan untuk menambahkan item ke akhir array). Selanjutnya kami akan memvalidasi alamat email:

//validate email address is not empty
if(empty($email)){
    $formok = false;
    $errors[] = "You have not entered an email address";
//validate email address is valid
}elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
    $formok = false;
    $errors[] = "You have not entered a valid email address";
}

Kami akan memeriksa untuk melihat apakah alamat email yang benar benar-benar dimasukkan. Untuk tugas ini, kita akan menggunakan fungsi filter_var(). Akhirnya, kami harus memvalidasi pesan.

//validate message is not empty
if(empty($message)){
    $formok = false;
    $errors[] = "You have not entered a message";
}
//validate message is greater than 20 charcters
elseif(strlen($message) < 20){
    $formok = false;
    $errors[] = "Your message must be greater than 20 characters";
}

Namun sekali lagi, kita akan memeriksa untuk melihat apakah pesan sudah masuk. Jika ada sesuatu yang dimasukkan, kami ingin memastikan itu lebih besar dari 20 karakter. Untuk ini, kita akan menggunakan fungsi strlen().

Bidang telepon dan kolom pertanyaan tidak diperlukan, jadi tidak perlu memvalidasi ini. Anda bisa, jika Anda ingin, tetapi untuk tujuan tutorial ini saya tidak.

Langkah 6: Apa yang harus dilakukan Selanjutnya ...

Setelah kami memvalidasi hasil formulir kami, kami perlu memutuskan apakah akan mengirim email kepada pengguna yang berisi hasil formulir atau tidak. Kami terus melacak validitas formulir menggunakan variabel $formok. Jika masih sama dengan true, kami ingin mengirimkan hasil formulir, jika tidak kami tidak.

Ini adalah logika yang akan kita gunakan untuk mengirim pesan (tempelkan ini setelah kami melakukan validasi kami):

//send email if all is ok
if($formok){
    $headers = "From: info@example.com" . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    
    $emailbody = "<p>You have recieved a new message from the enquiries form on your website.</p>
                  <p><strong>Name: </strong> {$name} </p>
                  <p><strong>Email Address: </strong> {$email} </p>
                  <p><strong>Telephone: </strong> {$telephone} </p>
                  <p><strong>Enquiry: </strong> {$enquiry} </p>
                  <p><strong>Message: </strong> {$message} </p>
                  <p>This message was sent from the IP Address: {$ipaddress} on {$date} at {$time}</p>";
    
    mail("enquiries@example.com","New Enquiry",$emailbody,$headers);
    
}

Untuk mengirim pesan, kita akan menggunakan fungsi mail(). Kita harus meneruskan fungsi ini empat parameter: ke, subjek, pesan dan header.

to: Ini akan menjadi alamat email yang ingin Anda kirimi detail formulir.
subject: Ini akan menjadi subjek email.
message: Ini akan menjadi konten email. Kami menyimpan ini di variabel $emailbody. Ini adalah string HTML yang berisi hasil dari formulir kami. Di mana Anda melihat kurung kurawal dengan nama variabel kami di dalamnya, ini akan diubah menjadi nilai variabel saat skrip ini dijalankan. Ini disebut substitusi variabel. Substitusi semacam ini hanya berfungsi jika string dienkapsulasi dalam kutipan DOUBLE, bukan TUNGGAL.
header: Ini digunakan untuk menyampaikan informasi tambahan ke klien email sehingga ia tahu bagaimana cara interpet email. Kami menyimpan header kami dalam variabel $headers dan memberikan informasi tambahan tentang dari siapa email itu, dan jenis konten apa yang dikandungnya.

Catatan: Ingatlah untuk mengubah dari alamat email di header dan ke alamat email di fungsi mail.

Ini harus menghasilkan email yang bagus seperti:

Jika Anda berada di server Windows, Anda mungkin perlu memasukkan baris kode ini (sebelum Anda mendeklarasikan variabel $headers) agar fungsi mail berfungsi:

1	ini_set("sendmail_from","info@example.com");

Apakah pengiriman formulir pengguna valid atau tidak, kami ingin mengembalikannya kembali ke formulir. Jika formulir valid dan pesan dikirim, kami perlu menyediakan pesan sukses kepada pengguna. Jika tidak valid, kami ingin menampilkan pesan kesalahan yang disimpan dalam susunan $errors serta mengisi kolom formulir dengan data yang awalnya dikirim. Kami akan menyimpan beberapa variabel yang telah kami gunakan dalam skrip ini dalam larik dan mengirimkannya bersama dengan pengalihan kembali ke formulir.

//what we need to return back to our form
$returndata = array(
    'posted_form_data' => array(
        'name' => $name,
        'email' => $email,
        'telephone' => $telephone,
        'enquiry' => $enquiry,
        'message' => $message
    ),
    'form_ok' => $formok,
    'errors' => $errors
);

Kami akan menyimpan data kami dalam susunan asosiatif. Array ini memiliki tiga anggota:

posted_form_data: Ini akan menjadi larik yang berisi data formulir yang diposting ke skrip.
form_ok: Kami akan menyimpan variabel $formok dalam ini, dan variabel ini akan diperiksa kembali pada halaman formulir untuk memperbarui pengguna dengan pesan yang sesuai.
errors: Kami akan menyimpan variabel $errors dalam hal ini. Variabel ini akan digunakan jika variabel $formok sama dengan false.

Hal terakhir yang harus kami lakukan adalah mengarahkan kembali pengguna ke halaman formulir, bersama dengan array $returndata kami. Setelah kita diarahkan kembali ke halaman formulir, kita akan kehilangan variabel $returndata; jadi, untuk membuat data ini tetap ada, kami akan menyimpannya sementara di sesi.

Hal lain yang perlu kita ingat adalah, pada akhirnya, jika browser pengguna mengaktifkan JavaScript, kami ingin mengirimkan formulir melalui AJAX. Itu berarti kami ingin permintaan AJAX kami diposkan ke tempat yang sama dengan pengiriman formulir ketika JavaScript dinonaktifkan. Karena formulir sudah divalidasi di sisi klien, formulir akan melewati semua validasi sisi server, dan detailnya akan dikirim melalui email kepada kami. Jika formulir tidak valid, itu tidak akan pernah dikirimkan (karena validasi browser / JavaScript akan mencegahnya). Ini berarti bahwa, dengan permintaan AJAX, tidak ada alasan bagi kami untuk mengalihkan atau mengatur variabel sesi apa pun. Di bagian akhir skrip ini, kami akan memeriksa untuk melihat apakah permintaan saat ini untuk process.php adalah permintaan AJAX atau tidak, dan jika itu, atur variabel sesi kami dan redirect.

//if this is not an ajax request
if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest'){
    
    //set session variables
    session_start();
    $_SESSION['cf_returndata'] = $returndata;
    
    //redirect back to form
    header('location: ' . $_SERVER['HTTP_REFERER']);

}

Untuk memeriksa apakah ini permintaan AJAX, kami mencari variabel, $ _SERVER ['HTTP_X_REQUESTED_WITH']. Seperti array $ _POST global super, ada juga yang disebut $ _SERVER. Array ini berisi informasi lingkungan server dan eksekusi. Lihat di sini untuk info lebih detail.

Kami kemudian memanggil session_start() untuk memberi kami akses ke sesi dan menetapkan variabel $ _SESSION ['cf_returndata'] untuk mencerminkan $ returndata. Pada halaman formulir, kita sekarang akan dapat mengakses variabel ini.

Untuk mengarahkan kembali ke formulir, kita menggunakan fungsi header(). Kami memberitahukannya untuk mengalihkan kami ke halaman terakhir kami berasal dari menggunakan variabel: $ _SERVER ['HTTP_REFERER'].

Secara keseluruhan Anda seharusnya telah berakhir dengan ini:

<?php
if( isset($_POST) ){
    
    //form validation vars
    $formok = true;
    $errors = array();
    
    //submission data
    $ipaddress = $_SERVER['REMOTE_ADDR'];
    $date = date('d/m/Y');
    $time = date('H:i:s');
    
    //form data
    $name = $_POST['name'];    
    $email = $_POST['email'];
    $telephone = $_POST['telephone'];
    $enquiry = $_POST['enquiry'];
    $message = $_POST['message'];
    
    //validate form data
    
    //validate name is not empty
    if(empty($name)){
        $formok = false;
        $errors[] = "You have not entered a name";
    }
    
    //validate email address is not empty
    if(empty($email)){
        $formok = false;
        $errors[] = "You have not entered an email address";
    //validate email address is valid
    }elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
        $formok = false;
        $errors[] = "You have not entered a valid email address";
    }
    
    //validate message is not empty
    if(empty($message)){
        $formok = false;
        $errors[] = "You have not entered a message";
    }
    //validate message is greater than 20 characters
    elseif(strlen($message) < 20){
        $formok = false;
        $errors[] = "Your message must be greater than 20 characters";
    }
    
    //send email if all is ok
    if($formok){
        $headers = "From: info@example.com" . "\r\n";
        $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
        
        $emailbody = "<p>You have received a new message from the enquiries form on your website.</p>
                      <p><strong>Name: </strong> {$name} </p>
                      <p><strong>Email Address: </strong> {$email} </p>
                      <p><strong>Telephone: </strong> {$telephone} </p>
                      <p><strong>Enquiry: </strong> {$enquiry} </p>
                      <p><strong>Message: </strong> {$message} </p>
                      <p>This message was sent from the IP Address: {$ipaddress} on {$date} at {$time}</p>";
        
        mail("enquiries@example.com","New Enquiry",$emailbody,$headers);
        
    }
    
    //what we need to return back to our form
    $returndata = array(
        'posted_form_data' => array(
            'name' => $name,
            'email' => $email,
            'telephone' => $telephone,
            'enquiry' => $enquiry,
            'message' => $message
        ),
        'form_ok' => $formok,
        'errors' => $errors
    );
        
    
    //if this is not an ajax request
    if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest'){
        //set session variables
        session_start();
        $_SESSION['cf_returndata'] = $returndata;
        
        //redirect back to form
        header('location: ' . $_SERVER['HTTP_REFERER']);
    }
}

Itu semua untuk memproses pengiriman formulir kami - dilakukan dan dibersihkan di bawah 90 baris PHP! Yang perlu kita lakukan sekarang adalah memperbarui pengguna dan memberikan pesan sukses atau pesan kesalahan. Anda dapat menyimpan process.php sekarang.

Langkah 7: Perbarui UI

Sekarang setelah kami memproses data formulir dan telah dikembalikan ke halaman, kami perlu memperbarui pengguna tentang apa yang telah terjadi. Ini berarti mengakses variabel sesi yang kita atur pada process.php dan mencari tahu respons apa yang diberikan. Karena halaman ini sekarang perlu menggunakan PHP, kita akan perlu mengubah ekstensi file index.html menjadi .php (index.html = index.php). Jangan khawatir, ini seharusnya tidak merusak apa pun yang sudah kita lakukan.

Hal pertama yang perlu kita lakukan adalah mengeluarkan variabel kita dari sesi. Untuk melakukan ini, kita perlu akses ke sesi. Tepat di bagian atas halaman sebelum markup apa pun (di atas doctype) tempel kode berikut di:

1	<?php session_start() ?>

Memulai sesi sebelum konten apa pun dikirim ke browser harus mencegah 'tidak dapat mengirim cookie sesi - header yang sudah dikirim oleh ...' kesalahan yang mungkin Anda terima. Di bawah H2 dari bentuk tambahkan dalam cuplikan PHP ini:

<?php
//init variables
$cf = array();
$sr = false;

if(isset($_SESSION['cf_returndata'])){
    $cf = $_SESSION['cf_returndata'];
    $sr = true;
}
?>

Kami menetapkan dua variabel ke nilai default. Lebih lanjut tentang ini nanti ... Kami kemudian memeriksa untuk melihat apakah $ _SESSION ['cf_returndata'] sudah diatur. Kami kemudian menetapkan $cf (kependekan dari formulir kontak) untuk menyamai variabel sesi kami. Ini hanya agar kita tidak perlu mengetik $_SESSION ... setiap kali kita ingin mengakses data ini. Variabel terakhir $sr (pendek dari respons server), diatur ke true. Ini adalah variabel yang akan kami periksa untuk melihat apakah kami telah memposting formulir kami sebelumnya. Hal berikutnya yang ingin kita lakukan adalah menampilkan pesan kesalahan atau sukses di bagian atas formulir. Ganti ini:

1	<ul id="errors" class="">
2	<li id="info">There were some problems with your form submission:</li>
3	</ul>
4	<p id="success">Thanks for your message! We will get back to you ASAP!</p>

Dengan ini:

<ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
    <li id="info">There were some problems with your form submission:</li>
    <?php 
    if(isset($cf['errors']) && count($cf['errors']) > 0) :
        foreach($cf['errors'] as $error) :
    ?>
    <li><?php echo $error ?></li>
    <?php
        endforeach;
    endif;
    ?>
</ul>
<p id="success" class="<?php echo ($sr && $cf['form_ok']) ? 'visible' : ''; ?>">Thanks for your message! We will get back to you ASAP!</p>

Secara default, pesan tidak muncul sama sekali karena, di CSS, kami telah menetapkan 'display: none'. Di dalam atribut class dari pesan, kami menggunakan PHP untuk menambahkan kelas 'visible' kepada mereka jika mereka ingin ditampilkan. Kelas ini menetapkan 'display' ke 'block'.

1	<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>

Kami menggunakan operator terner di sini untuk memeriksa ...

a) respons server sama dengan true dan
b) bahwa formulirnya tidak baik

Pada dasarnya, jika kami telah mengirimkan formulir, $sr akan sama dengan true, dan jika formulirnya tidak valid $cf ['form_ok'] akan sama dengan false. Jadi kelas yang terlihat akan dikeluarkan, tetapi PHP dan pesan akan muncul, dan sebaliknya untuk pesan sukses. Di dalam kurung, kami memeriksa nilai dari dua variabel. Kami memeriksa bahwa $sr sama dengan true dan (&&) $cf ['fomr_ok'] sama dengan false. Kami menggunakan singkatan untuk memeriksa nilai-nilai ini. Anda juga bisa menulisnya seperti ini jika Anda menginginkan:

1	<?php echo ($sr === true && $cf['form_ok'] === false) ? 'visible' : ''; ?>

Setelah kami memutuskan pesan mana yang akan ditampilkan, kami perlu mengisi penampung dengan data yang relevan. Pesan sukses tidak berubah, jadi kita bisa membiarkannya seperti itu. Pesan kesalahan perlu diisi dengan kesalahan validasi. Untuk menulis ini, kita hanya looping melalui array kesalahan kami disimpan dalam sesi dan mengisi elemen li di dalam ul:

<ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
    <li id="info">There were some problems with your form submission:</li>
    <?php 
    if(isset($cf['errors']) && count($cf['errors']) > 0) :
        foreach($cf['errors'] as $error) :
    ?>
    <li><?php echo $error ?></li>
    <?php
        endforeach;
    endif;
    ?>
</ul>

Kami pertama kali memeriksa bahwa kami memiliki array kesalahan kami dalam $cf dan itu berisi setidaknya satu kesalahan Pernyataan if and foreach mungkin terlihat sedikit berbeda dengan bagaimana Anda telah melihatnya sebelumnya. Ini disebut Sintaks Alternatif. Kami telah menggunakan sintaks alternatif di sini hanya untuk membuatnya sedikit lebih mudah dibaca dengan dicampur dengan HTML. Anda dapat menggunakan sintaks normal meskipun jika Anda suka, itu ke preferensi.

Itu saja yang kami butuhkan untuk menunjukkan kepada pengguna tanggapan dari pengiriman formulir. Untuk menguji ini, nonaktifkan JavaScript, dan kirim formulir. Ingat bahwa peramban akan memvalidasi formulir karena kami menggunakan elemen HTML5 baru. Jadi untuk menjadi super yakin PHP saya bekerja, saya sedang menguji di IE8. Ya, itu benar, IE memang berguna kadang-kadang ...

Jika Anda mengirimkan formulir yang tidak valid, Anda harus mendapatkan ini:

Dan jika Anda mengisi formulir dengan benar, Anda harus mendapatkan:

Anda seharusnya juga telah menerima email dari kode yang kami tulis sebelumnya (jika Anda mengisi formulir dengan benar). Sekarang setelah formulir berfungsi, hal terakhir yang perlu kita lakukan adalah mengisi kembali formulir isian dengan data pengguna jika pengiriman tidak valid. Tukar HTML di dalam tag formulir untuk ini:

<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>" placeholder="John Doe" required="required" autofocus="autofocus" />

<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['email'] : '' ?>" placeholder="johndoe@example.com" required="required" />

<label for="telephone">Telephone: </label>
<input type="tel" id="telephone" name="telephone" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['telephone'] : '' ?>" />

<label for="enquiry">Enquiry: </label>
<select id="enquiry" name="enquiry">
    <option value="General" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'General') ? "selected='selected'" : '' ?>>General</option>
    <option value="Sales" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Sales') ? "selected='selected'" : '' ?>>Sales</option>
    <option value="Support" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Support') ? "selected='selected'" : '' ?>>Support</option>
</select>

<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"><?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['message'] : '' ?></textarea>

<span id="loading"></span>
<input type="submit" value="Holla!" id="submit-button" />
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p>

Satu-satunya perbedaan di sini adalah bahwa kita menggunakan PHP untuk mengisi atribut nilai dari input.

1	<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>

Seperti yang kami lakukan dengan pesan sukses dan kesalahan, kami memeriksa untuk melihat apakah $sr sama dengan true dan $cf ['form_ok'] sama dengan false, dan jika ya, kami menuliskan nilai tersimpan dalam sesi untuk bidang formulir ini. Ini dilakukan dengan menggunakan operator terner.

Pada pilihan, kita melakukan hal yang sama, kecuali, daripada menuliskan nilai yang disimpan, kita perlu memeriksa setiap nilai opsi untuk melihat apakah itu cocok dengan yang disimpan dalam sesi. Jika cocok, kami menulis atribut yang dipilih untuk opsi itu.

Akhirnya, satu hal terakhir yang akan kita lakukan adalah unset variabel sesi ini setelah kami mendapatkan data kami darinya. Anda tidak harus melakukan ini; itu tergantung pada preferensi. Dengan tidak membukanya sekarang, ketika halaman di-refresh melalui tombol refresh (bukan form post), pesan kesalahan / sukses tidak akan ditampilkan. Jika Anda tidak membatalkannya, pengguna dapat mengisi formulir kontak, masuk ke internet, kembali ke formulir dan pesan kesalahan / sukses akan tetap ditampilkan. Saya tidak suka ini jadi saya akan mencegahnya dengan meletakkan baris PHP ini tepat setelah tag form penutup:

1	<?php unset($_SESSION['cf_returndata']); ?>

Jika Anda mengirimkan formulir yang tidak valid, Anda harus memperhatikan sekarang bahwa nilai input formulir Anda dipertahankan, dan jika Anda merujuk ke halaman, pesan dan data harus dihapus. Itu untuk sisi PHP! Anda harus berakhir dengan formulir Anda terlihat seperti ini:

<div id="contact-form" class="clearfix">
    <h1>Get In Touch!</h1>
    <h2>Fill out our super swanky HTML5 contact form below to get in touch with us! Please provide as much information as possible for us to help you with your enquiry :)</h2>
    <?php
    //init variables
    $cf = array();
    $sr = false;
    
    if(isset($_SESSION['cf_returndata'])){
        $cf = $_SESSION['cf_returndata'];
        $sr = true;
    }
    <ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
        <li id="info">There were some problems with your form submission:</li>
        <?php 
        if(isset($cf['errors']) && count($cf['errors']) > 0) :
            foreach($cf['errors'] as $error) :
        ?>
        <li><?php echo $error ?></li>
        <?php
            endforeach;
        endif;
        ?>
    </ul>
    <form method="post" action="process.php">
        <label for="name">Name: <span class="required">*</span></label>
        <input type="text" id="name" name="name" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>" placeholder="John Doe" required autofocus />
        
        <label for="email">Email Address: <span class="required">*</span></label>
        <input type="email" id="email" name="email" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['email'] : '' ?>" placeholder="johndoe@example.com" required />
        
        <label for="telephone">Telephone: </label>
        <input type="tel" id="telephone" name="telephone" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['telephone'] : '' ?>" />
        
        <label for="enquiry">Enquiry: </label>
        <select id="enquiry" name="enquiry">
            <option value="General" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'General') ? "selected='selected'" : '' ?>>General</option>
            <option value="Sales" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Sales') ? "selected='selected'" : '' ?>>Sales</option>
            <option value="Support" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Support') ? "selected='selected'" : '' ?>>Support</option>
        </select>
        
        <label for="message">Message: <span class="required">*</span></label>
        <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"><?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['message'] : '' ?></textarea>
        
        <span id="loading"></span>
        <input type="submit" value="Holla!" id="submit-button" />
        <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
    </form>
    <?php unset($_SESSION['cf_returndata']); ?>
</div>

Jangan lupa session_start() tepat di bagian atas halaman! Kami sekarang memiliki formulir kontak yang berfungsi penuh.

Data divalidasi, dan, jika berhasil, kami diemail hasil formulir. Selanjutnya, kami memperbarui UI dengan hasil untuk setiap pengiriman. Browser yang lebih baru bahkan akan memvalidasi formulir sebelum dikirim menggunakan jenis masukan HTML5 baru dan atribut yang telah kami gunakan.

Ini semua bagus dan keren, tapi kita bisa mengambil satu langkah lebih jauh. Kita dapat menggunakan JavaScript untuk meng-polyfill fitur-fitur yang tidak dimiliki browser (dibangun di validasi, dukungan untuk atribut HTML5, dll.). Kami bahkan dapat menggunakan JavaScript untuk menampilkan pesan kesalahan / sukses kami dan mengirimkan formulir menggunakan AJAX.

Tetapi mengapa hal ini terjadi ketika formulir sudah berfungsi? Yah, itu sederhana. Kami ingin memberikan konsistensi sebanyak mungkin di semua browser, meskipun itu adalah browser yang benar-benar naff. Juga, jika kita mendapatkan browser klien untuk menangani semua pekerjaan validasi, itu menghemat sumber daya server kami karena kami tidak mempostingnya ketika formulir tidak valid. Hal-hal ini adalah titik-titik coklat super, dan sebenarnya tidak terlalu sulit untuk dilakukan.

Langkah 8: Apa itu Polyfill?

"Polyfill, atau polyfiller, adalah bagian dari kode yang menyediakan teknologi yang Anda, pengembang, harapkan browser untuk menyediakan secara asli."

Dalam kasus kami, kami mengharapkan browser untuk mendukung jenis masukan HTML5 baru dan atribut yang telah kami gunakan. Firefox, Chrome, Opera, dan Safari memiliki dukungan asli yang cukup bagus untuk ini. IE6 - 9 tidak memiliki dukungan sama sekali. Khas. Sejujurnya, cukup mengejutkan IE9 tidak memiliki dukungan untuk hal-hal ini, itu baru saja dirilis awal tahun ini. Bagaimanapun, menempatkan IE bashing samping (saya bisa terus selamanya), dua hal pertama yang kita akan polyfill adalah autofocus dan atribut placeholder.

Kami akan menggunakan jQuery untuk membantu kami menggunakan JavaScript kami. Kami akan menggunakannya terutama untuk menangani permintaan AJAX kami, animasi, dan traversal & manipulasi DOM. Anda bisa lolos dengan tidak menggunakannya, tetapi Anda harus menulis sejumlah kode yang signifikan. Jejaknya tidak terlalu besar, jadi saya bisa hidup dengan ukuran file. Saya, mungkin seperti Anda, lebih suka menulis lebih sedikit kode.

Kami juga akan menggunakan perpustakaan JavaScript yang disebut Modernizr untuk membantu kami dengan deteksi fitur. Ini sudah dimasukkan sebagai bagian dari HTML5 boilerplate kami, jadi kami tidak perlu melakukan apa pun di sini untuk membuat Modernizr aktif dan berjalan!

Arahkan ke direktori js dan crack open script.js. Kami tidak perlu khawatir tentang mengaitkan file ini, jQuery atau Modernizr, ke index.php karena ini sudah disediakan bagi kami oleh HTML5 boilerplate yang kami gunakan. Hapus semua yang ada di file ini dan tempelkan yang berikut ini:

$(function(){

    //set global variables and cache DOM elements for reuse later
    var form = $('#contact-form').find('form'),
        formElements = form.find('input[type!="submit"],textarea'),
        formSubmitButton = form.find('[type="submit"]'),
        errorNotice = $('#errors'),
        successNotice = $('#success'),
        loading = $('#loading'),
        errorMessages = {
            required: ' is a required field',
            email: 'You have not entered a valid email address for the field: ',
            minlength: ' must be greater than '
        }

    //feature detection + polyfills
    formElements.each(function(){
    
        //do feature detection + polyfills here
        
    });
});

Semua kode kita akan hidup di dalam blok $(function(){}). Ini berarti kode kami akan dieksekusi segera setelah halaman dimuat. Juga setiap variabel atau fungsi yang kami nyatakan di dalam blok ini tidak akan mengganggu kode lain di luar. Kami kemudian melakukan cache beberapa elemen DOM, karena kami akan mengakses ini cukup sedikit. Lebih efisien untuk menyimpannya dengan cara ini daripada memintanya setiap kali Anda ingin menggunakannya. Berikut ini adalah rincian dari apa yang masing-masing variabel adalah:

form: Elemen formulir kontak.
formElements: Semua elemen input dan textareas dalam form kecuali tombol submit. Ini hanya akan menjadi larik elemen.
formSubmitButton: Tombol kirim formulir.
errorNotice: Pemberitahuan kesalahan - elemen daftar tak berurutan.
successNotice: Pesan sukses - elemen paragraf.
loading: Elemen rentang pemuatan. Ini akan menampilkan pemuatan gif ketika formulir dikirimkan setelah divalidasi.
errorMessages: Ini adalah objek yang berisi beberapa teks untuk pesan kesalahan kami. Ini digunakan lebih dari sekali sehingga kami menggunakannya di sini. Anda akan melihat beberapa pesan tidak terbaca dengan benar. Kami akan secara dinamis menambahkan ini nanti ketika kami melanjutkan untuk memvalidasi formulir.

Setelah ini, kita menggunakan fungsi jQuery, yang disebut each() untuk beralih ke array formElements. Sementara kita melakukan iterasi atas elemen form, kami ingin melakukan deteksi fitur untuk atribut placeholder, dan jika elemen memiliki atribut ini tetapi tidak didukung oleh browser, terapkan polyfill kami. Berikut ini adalah polyfill untuk atribut placeholder:

//if HTML5 input placeholder attribute is not supported
if(!Modernizr.input.placeholder){
    var placeholderText = this.getAttribute('placeholder');
    if(placeholderText){
        $(this)
            .addClass('placeholder-text')
            .val(placeholderText)
            .bind('focus',function(){
                if(this.value == placeholderText){
                    $(this)
                        .val('')
                        .removeClass('placeholder-text');
                }
            })
            .bind('blur',function(){
                if(this.value == ''){
                    $(this)
                        .val(placeholderText)
                        .addClass('placeholder-text');
                }
            });
    }
}

Di sini kita menggunakan Modernizr untuk menentukan apakah kita memiliki dukungan untuk atribut placeholder pada input. Modernizer adalah objek, input adalah properti dari objek itu, dan placeholder adalah properti input (maka semua titik). Nilai ini bisa true atau false. Kami memeriksa untuk melihat apakah itu false (browser tidak mendukung atribut placeholder); jika demikian, kami menerapkan polyfill kami. Hal pertama yang kami lakukan adalah mendeklarasikan variabel yang akan menahan teks placeholder yang ditetapkan ke elemen. Meskipun browser tidak mendukung atribut placeholder, kita masih dapat mengakses atribut ini. Kami menggunakan fungsi, yang disebut getAttribute() untuk ini. Kata kunci 'this' mengacu pada elemen DOM saat ini yang kita iterasi ke dalam loop.

Setelah kami memiliki teks placeholder, kami dapat melakukan pemeriksaan untuk memastikan bahwa itu tidak kosong. Ini agar kami hanya menerapkan polyfill kami ke input yang memiliki atribut placeholder. Kami kemudian mengumpulkan beberapa fungsi jQuery yang berguna untuk membuat polyfill kami. Berikut uraian tentang apa yang kami lakukan:

Kami membungkus kata kunci 'ini' dalam fungsi jQuery ($ ()) sehingga kami memiliki akses ke beberapa fungsi DOM praktis jQuery
Kami menambahkan 'placeholder-text' kelas ke elemen. Ini akan membuat elemen-elemen text placeholder yang akan kita polibill terlihat seperti sisa dari browser. Kami telah menetapkan aturan untuk ini sudah ada di CSS.
Kami menetapkan nilai default input ke nilai atribut placeholder. Ini akan menunjukkan teks placeholder di kolom input ketika halaman telah dimuat.
Kami mengikat acara fokus yang akan memeriksa apakah teks atribut placeholder sama dengan nilai input. Jika ya, maka nilai input tidak diatur apa-apa, yang menghapus input dan kita menghapus kelas 'placeholder-text' sehingga teks adalah teks masukan gaya default.
Kami mengikat acara blur yang akan memeriksa apakah nilai input sama dengan tidak ada. Jika ya, kami mengisi input dengan teks placeholder, dan menerapkan ulang 'placeholder-text'

Ini akan membuat browser apa pun yang tidak mendukung atribut placeholder bertindak seolah-olah itu dilakukan dengan meyakinkan. Lihat gambar di bawah ini dari IE8:

Selanjutnya kita akan mengolari atribut autofocus. Yang satu ini mati sederhana:

1	//if HTML5 input autofocus attribute is not supported
2	if(!Modernizr.input.autofocus){
3	if(this.getAttribute('autofocus')) this.focus();
4	}

Kami menggunakan Modernizer untuk menentukan apakah atribut autofocus didukung. Jika tidak, maka kita periksa apakah elemen ini memiliki atribut autofocus yang diatur di atasnya, dan jika ya, kita memfokuskannya. Sederhana. Di browser apa pun yang tidak mendukung atribut ini, ini akan menyediakan perbaikan.

Satu-satunya hal lain yang kita butuhkan untuk polyfill adalah atribut yang diperlukan, jenis input email, dan validasi form yang dibangun. Kami juga ingin menambahkan validasi untuk panjang pesan, dan menunjukkan pesan kesalahan dengan rincian masalah dengan formulir.

Langkah 9: Validasi Formulir, Gaya Polyfill

//to ensure compatibility with HTML5 forms, we have to validate the form on submit button click event rather than form submit event. 
//An invalid html5 form element will not trigger a form submit.
formSubmitButton.bind('click',function(){
    var formok = true,
        errors = [];
        
    formElements.each(function(){
           
        //validate form elements here
           
    });
    
    //if form is not valid
    if(!formok){
        
        //show error message here
        
    }
    //if form is valid
    else {
        
        //ajax request + show success message here
        
    }
    
    return false; //this stops submission off the form and also stops browsers showing default error message
});

Kami mengikat acara klik ke tombol pengiriman formulir (disimpan dalam variabel formSubmitButton). Ketika acara ini dipicu, kami akan memvalidasi formulir. Biasanya dalam JavaScript kita benar-benar akan melakukan ini pada acara pengiriman formulir, tetapi karena browser yang lebih baru menggunakan validasi bawaannya sendiri, formulir pengiriman formulir tidak pernah dipicu. Browser akan menampilkan pesan kesalahannya sendiri, tetapi ini sangat tidak konsisten di semua browser, dan saat ini tidak ada cara untuk mengatur ini. Menampilkan pesan kesalahan kita sendiri akan memberikan konsistensi, dan juga menunjukkan untuk browser yang tidak mendukung metode validasi baru. Untuk menghentikan peramban yang menampilkan pesan galat asali mereka, kami mengembalikan nilai false di akhir fungsi ini. Berikut ini adalah rincian apa variabel yang ditetapkan di bagian atas adalah untuk:

formok: Ini akan melacak validitas formulir.
errors: Ini adalah larik dan akan menyimpan pesan kesalahan.

Ini mirip dengan validasi PHP yang kami tulis sebelumnya!

Kami akan mulai di dalam loop di mana kami akan memvalidasi elemen form. Di dalam lingkaran ini, kami ingin memulai dengan mendeklarasikan beberapa variabel yang berguna yang akan kami gunakan dalam validasi kami.

var name = this.name,
    nameUC = name.ucfirst(),
    value = this.value,
    placeholderText = this.getAttribute('placeholder'),
    type = this.getAttribute('type'), //get type old school way
    isRequired = this.getAttribute('required'),
    minLength = this.getAttribute('data-minlength');

name: Nama elemen saat ini.
nameUC: Nama elemen saat ini dengan huruf pertama diberi huruf besar. ucfirst() adalah metode kustom dari objek string yang akan kita tulis nanti.
value: Nilai dari elemen saat ini.
placeholderText: Teks placeholder elemen saat ini.
type: Tipe dari elemen saat ini.
isRequired: Apakah elemen saat ini memiliki atribut yang diperlukan di atasnya atau tidak.
minLength: Nilai data-minlength dari elemen saat ini (jika ada).

Sekarang kita memiliki variabel yang ditetapkan, kita bisa mulai dengan validasi kita. Untuk elemen yang menggunakan jenis dan atribut masukan HTML5, kita dapat menggunakan API JavaScript validasi baru untuk memeriksa validitasnya.

Di HTML5, elemen formulir memiliki properti baru yang disebut validity. Di sinilah semua data validasi untuk elemen ini disimpan. Di Firebug, ini terlihat seperti ini:

Seperti yang Anda lihat, ada banyak properti dalam objek ini yang memberi kita sedikit lebih banyak petunjuk tentang apa masalahnya. Nilai-nilai properti false atau false. Dalam screenshot ini, saya mencoba mengirimkan formulir tanpa nama, dan saya mencatat properti validitas untuk input nama di konsol (console.log (this.validity) ). Ini menunjukkan kepada saya bahwa suatu nilai hilang (valueMissing = true).

Kode kami untuk memeriksa elemen HTML5:

//if HTML5 formfields are supported            
if( (this.validity) && !this.validity.valid ){
    formok = false;
    
    //if there is a value missing
    if(this.validity.valueMissing){
        errors.push(nameUC + errorMessages.required);    
    }
    //if this is an email input and it is not valid
    else if(this.validity.typeMismatch && type == 'email'){
        errors.push(errorMessages.email + nameUC);
    }
    
    this.focus(); //safari does not focus element an invalid element
    return false;
}

Kami memeriksa apakah elemen formulir ini memiliki properti validitas, dan jika ya, kami kemudian memeriksa properti valid dari objek validity untuk melihat apakah bidang ini ok. Jika tidak valid (saya menggunakan singkatan,!, Untuk memeriksa false), kami menetapkan formok ke false, dan melakukan beberapa tes untuk melihat apa masalahnya.

Jika nilai hilang (dipicu oleh bidang wajib), kami menambahkan pesan kesalahan ke array kesalahan yang kami atur sebelumnya. Kami menggunakan metode push() dari objek array untuk ini. Pesan kesalahan akan terdiri dari nama elemen (huruf pertama uppercased) yang digabung dengan pesan kesalahan yang diperlukan yang kita atur sebelumnya di skrip kita.

Jika nilai bidang formulir ini tidak hilang, kami kemudian ingin menentukan apakah data yang benar dimasukkan. Satu-satunya masukan dalam formulir kami yang memerlukan validasi adalah bidang email. Dengan mengingat hal ini, di bagian elseif kode kami, kami memeriksa apakah properti typeMismatch dari objek validitas sama dengan true dan jika jenis input ini sebenarnya adalah email. Jika demikian, kami menambahkan pesan kesalahan email ke array kesalahan kami.

Ketika browser memvalidasi bidang dan dianggap tidak valid, maka secara otomatis fokus. Safari tidak mendukung ini, jadi demi konsistensi, kami secara manual memfokuskan input. Kami kemudian kembali salah pada akhir validasi masukan HTML5 kami untuk keluar dari loop, karena kami tahu bahwa kami memiliki elemen yang tidak valid (kami tidak perlu membuang waktu kami memvalidasi sisa elemen dalam formulir).

Ini akan mencakup masukan HTML5 kami dengan baik, tetapi sekarang kami harus melayani browser yang tidak mendukung API validasi formulir JavaScript. Jika API validasi form JavaScript tidak didukung oleh browser, kode di atas tidak akan pernah terdeteksi dan dilewati.

Hal pertama yang akan kami periksa adalah jika bidang itu diperlukan. Polyfill kami untuk ini akan terlihat seperti:

//if this is a required element
if(isRequired){    
    //if HTML5 input required attribute is not supported
    if(!Modernizr.input.required){
        if(value == placeholderText){
            this.focus();
            formok = false;
            errors.push(nameUC + errorMessages.required);
            return false;
        }
    }
}

Pertama, kami memeriksa apakah bidang ini adalah bidang wajib (didikte oleh atribut required). Kami kemudian menggunakan Modernizr untuk memeriksa apakah atribut yang diperlukan didukung oleh browser. Jika tidak, kita perlu memeriksa secara manual nilai elemen dan membandingkannya dengan atribut placeholder elemen. Jika mereka sama, maka jelas kolom formulir ini belum diisi sehingga kami melakukan empat hal:

Kami memfokuskan input (karena ini yang dilakukan browser saat menggunakan validasi asli)
Kami menetapkan variabel formok ke false, karena formulir tidak valid
Kami menambahkan pesan kesalahan ke array kesalahan kami.
Kami mengembalikan false, yang pecah dari loop, dan akan langsung ke bit kode berikutnya di luar loop.

Kami selanjutnya akan memeriksa apakah ini adalah masukan email, dan, jika ya, apakah email yang valid telah dimasukkan.

//if HTML5 input email input is not supported
if(type == 'email'){     
    if(!Modernizr.inputtypes.email){ 
        var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
        if( !emailRegEx.test(value) ){    
            this.focus();
            formok = false;
            errors.push(errorMessages.email + nameUC);
            return false;
        }
    }
}

Ini hampir sama seperti sebelumnya. Kami melihat apakah ini benar-benar bidang email, dan kemudian gunakan Modernizr untuk memeriksa apakah masukan email didukung. Jika tidak, kami menulis kode kami yang memeriksa apakah itu valid atau tidak. Untuk polyfill ini, kami menggunakan ekspresi reguler untuk menguji apakah email itu valid atau tidak. Kami membuat ekspresi reguler dalam variabel emailRegEx, kemudian gunakan metode test() dari objek ekspresi reguler untuk menguji apakah nilai input valid terhadap ekspresi reguler.

Anda dapat mempelajari lebih lanjut tentang menggunakan ekspresi reguler JavaScript di sini.

Jika alamat email tidak valid, kami melakukan empat hal yang sama yang kami lakukan pada pemeriksaan input yang diperlukan.

Hal terakhir yang perlu kami validasikan dalam formulir kami adalah panjang pesan. Validasi yang diperlukan sudah diuraikan di atas, jadi yang perlu kita lakukan adalah memeriksa panjang pesan:

//check minimum lengths
if(minLength){
    if( value.length < parseInt(minLength) ){
        this.focus();
        formok = false;
        errors.push(nameUC + errorMessages.minlength + minLength + ' charcters');
        return false;
    }
}

Kami tidak perlu menggunakan Modernizr di sini. Sebagai gantinya, yang perlu kita lakukan adalah memeriksa apakah elemen ini memiliki panjang minimum yang ditetapkan, dan jika ya, pastikan panjangnya lebih besar dari panjang minimum yang ditetapkan. Length adalah properti dari semua objek string dalam JavaScript dan mengembalikan jumlah karakter dalam string. Kami menggunakan parseInt() untuk mengonversi minLength menjadi integer untuk membandingkannya dengan value.length. minLength diambil dari atribut data-minlength. Ini diambil sebagai string, jadi untuk mencegah potensi kesalahan di garis (membandingkan string ke angka dll.), Kita mengubahnya menjadi integer.

Polyfill dan validasi kami sekarang telah selesai dan disortir. Anda seharusnya mendapatkan kode berikut ini:

//to ensure compatibility with HTML5 forms, we have to validate the form on submit button click event rather than form submit event. 
//An invalid html5 form element will not trigger a form submit.
formSubmitButton.bind('click',function(){
    var formok = true,
        errors = [];
        
    formElements.each(function(){
        var name = this.name,
            nameUC = name.ucfirst(),
            value = this.value,
            placeholderText = this.getAttribute('placeholder'),
            type = this.getAttribute('type'), //get type old school way
            isRequired = this.getAttribute('required'),
            minLength = this.getAttribute('data-minlength');
            
        //if HTML5 formfields are supported            
        if( (this.validity) && !this.validity.valid ){
            formok = false;
            
            //if there is a value missing
            if(this.validity.valueMissing){
                errors.push(nameUC + errorMessages.required);    
            }
            //if this is an email input and it is not valid
            else if(this.validity.typeMismatch && type == 'email'){
                errors.push(errorMessages.email + nameUC);
            }
            
            this.focus(); //safari does not focus element an invalid element
            return false;
        }
        
        //if this is a required element
        if(isRequired){    
            //if HTML5 input required attribute is not supported
            if(!Modernizr.input.required){
                if(value == placeholderText){
                    this.focus();
                    formok = false;
                    errors.push(nameUC + errorMessages.required);
                    return false;
                }
            }
        }

        //if HTML5 input email input is not supported
        if(type == 'email'){     
            if(!Modernizr.inputtypes.email){ 
                var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
                if( !emailRegEx.test(value) ){    
                    this.focus();
                    formok = false;
                    errors.push(errorMessages.email + nameUC);
                    return false;
                }
            }
        }
        
        //check minimum lengths
        if(minLength){
            if( value.length < parseInt(minLength) ){
                this.focus();
                formok = false;
                errors.push(nameUC + errorMessages.minlength + minLength + ' charcters');
                return false;
            }
        }
    });
    
    //if form is not valid
    if(!formok){
        
        //show error message here
        
    }
    //if form is valid
    else {
        
        //ajax request + show success message here
        
    }
    
    return false; //this stops submission off the form and also stops browsers showing default error message
});

Luar biasa! Kami hampir sampai sekarang. Pada titik ini, yang perlu kita lakukan hanyalah menulis kode yang menangani logika untuk memeriksa apakah formulir itu harus diserahkan atau tidak. Kami akan perlu menampilkan pesan kesalahan kami yang telah kami simpan, dan menghentikan pengiriman formulir jika ada kesalahan. Jika, di sisi lain, tidak ada kesalahan, kami mengirimkan formulir melalui AJAX dan mengungkapkan pesan sukses. Kita juga perlu untuk menutupi fungsi ucfirst() yang telah kita gunakan untuk huruf besar huruf pertama dari setiap nama field.

Langkah 11: Hampir Ada ...

Hal pertama yang akan kita lakukan adalah menulis fungsi untuk menangani pesan, dan juga fungsi ucfirst() kami. Sisipkan kode berikut di luar logika formSubmitButton.bind ... yang telah kami tulis.

//other misc functions
function showNotice(type,data)
{
    if(type == 'error'){
        successNotice.hide();
        errorNotice.find("li[id!='info']").remove();
        for(x in data){
            errorNotice.append('<li>'+data[x]+'</li>');    
        }
        errorNotice.show();
    }
    else {
        errorNotice.hide();
        successNotice.show();    
    }
}

String.prototype.ucfirst = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

Fungsi showNotice akan mengambil dua argumen.

Jenis pesan untuk ditampilkan
Data untuk ditampilkan dalam pesan.

Jika jenisnya adalah 'error', kita menyembunyikan pesan sukses, loop melalui data (yang seharusnya menjadi array), dan menambahkan elemen daftar ke pemberitahuan kesalahan UL. Kami kemudian menunjukkan pemberitahuan kesalahan menggunakan fungsi jQuery show(). Karena semua kode kami terkandung dalam blok yang sama, kami memiliki akses ke variabel yang ditetapkan di luar fungsi ini (successNotice and errorNotice). Jika kami ingin menunjukkan pesan sukses, kami cukup menyembunyikan pesan kesalahan dan menampilkan pesan sukses.

Dengan fungsi ucfirst(), saya menambahkan fungsi ini ke prototipe objek string.

"Prototipe adalah objek dari mana objek lain mewarisi properti."

Ini berarti bahwa semua objek string akan mewarisi fungsi ucfirst() kami. Inilah sebabnya, sebelumnya, kami menggunakan name.ucfirst (). name adalah benang, dan karena metode kami dalam prototipe, itu tersedia untuk kita gunakan.

Kita mendapatkan karakter pertama (charAt (0)), menjadikannya huruf besar (toUpperCase ()), kemudian mengembalikannya dengan sisa string dikurangi karakter pertama (slice (1)). charAt, toUpperCase dan slice adalah semua metode dari objek string. Anda dapat membaca lebih lanjut tentang objek prototipe di sini atau di sini.

Sekarang setelah kita memiliki fungsi lain-lain yang beres, kita dapat berkonsentrasi pada logika untuk hasil formulir. Kami kembali bekerja di dalam logika formSubmitButton.bind.

//if form is not valid
if(!formok){
    
    //show error message here
    
}
//if form is valid
else {
    
    //ajax request + show success message here
    
}

Kami akan mulai dengan logika jika formulir tidak valid. Kode berikut harus ditempatkan di dalam pernyataan if:

//animate required field notice
$('#req-field-desc')
    .stop()
    .animate({
        marginLeft: '+=' + 5
    },150,function(){
        $(this).animate({
            marginLeft: '-=' + 5
        },150);
    });

//show error message 
showNotice('error',errors);

Potongan pertama kode cukup menjiwai '* menunjukkan bidang yang diperlukan'. Ini tidak penting; itu hanya kebaikan yang memberi pengguna sedikit lebih banyak umpan balik - bahwa masalah sebenarnya telah terjadi. `Kami menggunakan fungsi jQuery animate() untuk menganimasikan nilai CSS margin-left dari elemen. Setelah ini, kita akan memanggil fungsi showNotice(). Kami ingin menunjukkan pesan kesalahan sehingga kami mengirimkan 'error' sebagai argumen pertama, lalu untuk data yang kami berikan, kami telah menyimpan kesalahan eror form kami.

Jika formulirnya valid, kami harus mengirimkannya melalui AJAX.

loading.show();
$.ajax({
    url: form.attr('action'),
    type: form.attr('method'),
    data: form.serialize(),
    success: function(){
        showNotice('success');
        form.get(0).reset();
        loading.hide();
    }
});

Pertama, kami mengungkapkan pemuatan gif kami untuk menunjukkan bahwa formulir tersebut melakukan sesuatu. Kami kemudian menggunakan fungsi jQuery ajax () untuk mengirimkan formulir ke process.php. Untuk url dan jenisnya, kami menggunakan fungsi jQuery attr () untuk mendapatkan atribut ini. Untuk data, kami menggunakan fungsi jQuery serialize(). Jika permintaan AJAX berhasil, kami memanggil fungsi showNotice () kami dan menyebarkannya 'sukses' sebagai argumen pertama. Ini menampilkan pesan sukses kami. Hal terakhir yang kami lakukan adalah mereset formulir (menghapus kolom formulir) dan menyembunyikan pemuatan gif. Semua JavaScript sekarang sudah diurus! Congrats1 Anda seharusnya sudah berakhir dengan file script.js Anda terlihat seperti ini:

$(function(){

    //set global variables and cache DOM elements for reuse later
    var form = $('#contact-form').find('form'),
        formElements = form.find('input[type!="submit"],textarea'),
        formSubmitButton = form.find('[type="submit"]'),
        errorNotice = $('#errors'),
        successNotice = $('#success'),
        loading = $('#loading'),
        errorMessages = {
            required: ' is a required field',
            email: 'You have not entered a valid email address for the field: ',
            minlength: ' must be greater than '
        }
    
    //feature detection + polyfills
    formElements.each(function(){

        //if HTML5 input placeholder attribute is not supported
        if(!Modernizr.input.placeholder){
            var placeholderText = this.getAttribute('placeholder');
            if(placeholderText){
                $(this)
                    .addClass('placeholder-text')
                    .val(placeholderText)
                    .bind('focus',function(){
                        if(this.value == placeholderText){
                            $(this)
                                .val('')
                                .removeClass('placeholder-text');
                        }
                    })
                    .bind('blur',function(){
                        if(this.value == ''){
                            $(this)
                                .val(placeholderText)
                                .addClass('placeholder-text');
                        }
                    });
            }
        }
        
        //if HTML5 input autofocus attribute is not supported
        if(!Modernizr.input.autofocus){
            if(this.getAttribute('autofocus')) this.focus();
        }
        
    });
    
    //to ensure compatibility with HTML5 forms, we have to validate the form on submit button click event rather than form submit event. 
    //An invalid html5 form element will not trigger a form submit.
    formSubmitButton.bind('click',function(){
        var formok = true,
            errors = [];
            
        formElements.each(function(){
            var name = this.name,
                nameUC = name.ucfirst(),
                value = this.value,
                placeholderText = this.getAttribute('placeholder'),
                type = this.getAttribute('type'), //get type old school way
                isRequired = this.getAttribute('required'),
                minLength = this.getAttribute('data-minlength');
                
            //if HTML5 formfields are supported            
            if( (this.validity) && !this.validity.valid ){
                formok = false;
                
                //if there is a value missing
                if(this.validity.valueMissing){
                    errors.push(nameUC + errorMessages.required);    
                }
                //if this is an email input and it is not valid
                else if(this.validity.typeMismatch && type == 'email'){
                    errors.push(errorMessages.email + nameUC);
                }
                
                this.focus(); //safari does not focus element an invalid element
                return false;
            }
            
            //if this is a required element
            if(isRequired){    
                //if HTML5 input required attribute is not supported
                if(!Modernizr.input.required){
                    if(value == placeholderText){
                        this.focus();
                        formok = false;
                        errors.push(nameUC + errorMessages.required);
                        return false;
                    }
                }
            }

            //if HTML5 input email input is not supported
            if(type == 'email'){     
                if(!Modernizr.inputtypes.email){ 
                    var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
                     if( !emailRegEx.test(value) ){    
                        this.focus();
                        formok = false;
                        errors.push(errorMessages.email + nameUC);
                        return false;
                    }
                }
            }
            
            //check minimum lengths
            if(minLength){
                if( value.length < parseInt(minLength) ){
                    this.focus();
                    formok = false;
                    errors.push(nameUC + errorMessages.minlength + minLength + ' charcters');
                    return false;
                }
            }
        });
        
        //if form is not valid
        if(!formok){
            
            //animate required field notice
            $('#req-field-desc')
                .stop()
                .animate({
                    marginLeft: '+=' + 5
                },150,function(){
                    $(this).animate({
                        marginLeft: '-=' + 5
                    },150);
                });
            
            //show error message 
            showNotice('error',errors);
            
        }
        //if form is valid
        else {
          loading.show();
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: form.serialize(),
                success: function(){
                    showNotice('success');
                    form.get(0).reset();
                    loading.hide();
                }
            });
        }
        
        return false; //this stops submission off the form and also stops browsers showing default error messages
        
    });

    //other misc functions
    function showNotice(type,data)
    {
        if(type == 'error'){
            successNotice.hide();
            errorNotice.find("li[id!='info']").remove();
            for(x in data){
                errorNotice.append('<li>'+data[x]+'</li>');    
            }
            errorNotice.show();
        }
        else {
            errorNotice.hide();
            successNotice.show();    
        }
    }
    
    String.prototype.ucfirst = function() {
        return this.charAt(0).toUpperCase() + this.slice(1);
    }
    
});

Kesimpulan

Selamat! Anda berhasil. Ini adalah perjalanan panjang, dan kami telah membahas banyak hal dalam tutorial ini.

Jadi, kemana kamu pergi dari sini? Ini dapat diperluas ke bentuk yang jauh lebih besar, dan semua kode yang Anda tulis akan tetap berfungsi dengan sempurna. Anda bahkan dapat menambahkan validasi Anda sendiri untuk hal-hal seperti bidang input telepon atau atribut maxlength!

Terima kasih telah membaca, dan saya harap Anda menikmati tutorial ini!