Validasi nama, email dan website pada web form PHP

Tutorial ini merupakan lanjutan dari tutorial sebelumnya.

Validasi nama, email dan website

Pada tutorial kali ini kita akan membuat tiga buah validasi data pada web form HTML yaitu validasi nama, validasi email, dan validasi website. Selanjutnya ketiga buah code validasi tersebut akan kita gabungkan pada web form HTML yang sudah kita buat pada tutorial sebelum ini.

Web form yang ingin kita buat tersusun dari beberapa elemen. Elemen-elemen yang bisa digunakan oleh web form untuk mengumpulkan data bisa berbentuk kotak text atau tombol radio.

Berikut ini adalah beberapa elemen web form yang ingin kita buat:

Elemen Bentuk Aturan
Nama Kotak text Wajib diisi. Hanya boleh berisi huruf dan spasi.
Email Kotak text Wajib diisi. Harus berisi pola penulisan alamat email yang benar (ada symbol @ dan titik .).
Website Kotak text Pilihan. Boleh diisi atau tidak. Jika diisi maka harus berisi pola penulisan alamat website yang benar.
Komentar Kotak text Pilihan. Boleh diisi atau tidak.
Kelamin Tombol radio Wajib dipilih salah satu.

Validasi nama

Code berikut ini berguna untuk memeriksa apakah data [nama] yang diberikan oleh user hanya mengandung character berupa huruf dan spasi. Jika pada data tersebut ada character selain huruf dan spasi maka pesan error akan disimpan pada variable [$nama_error]. Pesan error tersebut nantinya akan ditampilkan pada web form HTML.

if (!preg_match("/^[a-zA-Z ]*$/",$nama)) {
    $nama_error = "Hanya bisa menggunakan huruf dan spasi";
}

Code preg_match() function berguna untuk mencari character atau kata bedasarkan regular expression. Jika character atau kata yang dicari ditemukan maka preg_match() function akan menghasilkan [true], sebaliknya jika tidak ditemukan maka preg_match() function akan menghasilkan [false].

Validasi email

Salah satu cara memeriksa apakah sebuah alamat email sudah sesuai dengan pola penulisan alamat email yang benar atau tidak adalah dengan menggunakan filter_var() function.

Pada code berikut ini jika data [email] yang diberikan oleh user pada web form HTML tidak sesuai dengan pola penulisan alamat email yang benar maka pesan error akan disimpan di dalam variable [$email_error]. Pesan error tersebut nantinya akan ditampilkan pada web form HTML.

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $email_error = "Alamat email salah";
}

Validasi website

Berikut ini adalah code yang berguna untuk memeriksa apakah sebuah alamat website sudah sesuai dengan pola penulisan alamat website yang benar atau tidak.

if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
    $website_error = "Alamat URL salah, gunakan format www.alamatweb.com";
}

Berikut ini adalah code web form HTML lengkap setelah digabung dengan ketiga code validasi di atas:

Isi file webform.php 1:

<?php
// Membuat variable dan memasukkan nilai awal
$nama_error = $email_error = $kelamin_error = $website_error = "";
$nama = $email = $kelamin = $komentar = $website = "";

function validasi_form($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
};

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["nama"])) {
        $nama_error = "Nama belum dimasukkan";
    } else {
        $nama = validasi_form($_POST["nama"]);
        // Periksa jika nama hanya mengandung huruf dan spasi
        if (!preg_match("/^[a-zA-Z ]*$/",$nama)) {
            $nama_error = "Hanya bisa menggunakan huruf dan spasi";
        }
    }

    if (empty($_POST["email"])) {
        $email_error = "Email belum dimasukkan";
    } else {
        $email = validasi_form($_POST["email"]);
        // Periksa jika alamat email sudah benar
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $email_error = "Alamat email salah";
        }
    }

    if (empty($_POST["website"])) {
        $website = "";
    } else {
        $website = validasi_form($_POST["website"]);
        // Periksa penulisan alamat website (Regular expression di bawah ini mengijinkan garis sambung)
        if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
            $website_error = "Alamat URL salah, gunakan format www.alamatweb.com";
        }
    }

    if (empty($_POST["komentar"])) {
        $komentar = "";
    } else {
        $komentar = validasi_form($_POST["komentar"]);
    }

    if (empty($_POST["kelamin"])) {
        $kelamin_error = "Kelamin belum dipilih";
    } else {
        $kelamin = validasi_form($_POST["kelamin"]);
    }
};
?>

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Nama: 
<input type="text" name="nama"> * <?php echo $nama_error;?>
<br /><br />
Email:
<input type="text" name="email"> * <?php echo $email_error;?>
<br /><br />
Website:
<input type="text" name="website"> <?php echo $website_error;?>
<br /><br />
Komentar: 
<textarea name="komentar" rows="5" cols="40"></textarea>
<br /><br />
Kelamin:
<input type="radio" name="kelamin" value="perempuan">Perempuan
<input type="radio" name="kelamin" value="lakilaki">Laki-laki
* <?php echo $kelamin_error;?>
<br /><br />
<input type="submit" name="submit" value="Submit">
</form>

Hasil isi file webform.php 1:

Nama:
*

Email:
*

Website:

Komentar:

Kelamin:
Perempuan
Laki-laki
*


Perhatikan code berikut ini yang merupakan potongan dari code web form HTML di atas:

if (empty($_POST["email"])) {
    $email_error = "Email belum dimasukkan";
} else {
    $email = validasi_form($_POST["email"]);
    // Periksa jika alamat email sudah benar
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $email_error = "Alamat email salah";
    }
}

Pada code if else statement di atas:

Jika array $_POST["email"] tidak berisi data [email] maka variable [$email_error] akan berisi pesan error.

Jika array $_POST["email"] berisi data [email] maka validasi_form() function akan dijalankan terhadap data [email] yang tersimpan di dalam array $_POST["email"]. Selanjutnya data [email] akan divalidasi menggunakan code validasi email yang sudah kita buat di atas.

Code empty() function digunakan untuk memeriksa apakah array $_POST["email"] berisi data [email] atau tidak. Code empty() function akan menghasilkan nilai boolean [true] jika sebuah variable diisi oleh string kosong [""], false, array(), NULL, "0", atau 0.

Menampilkan data pada input web form

Berikut ini kita akan membuat code yang menampilkan data pada bagian input web form. Data yang akan ditampilkan tersebut merupakan data yang diberikan oleh user dan akan ditampilkan setelah user menekan tombol submit.

Misalkan user memasukkan data [email] pada bagian input [email] maka data [email] tersebut akan ditampilkan pada bagian input [email] tersebut setelah user menekan tombol submit.

Untuk menampilkan data yang telah diberikan oleh user pada bagian input nama, email, dan website kita bisa menggunakan atribut value.

Nama: 
<input type="text" name="nama" value="<?php echo $nama;?>" >

Email: 
<input type="text" name="email" value="<?php echo $email;?>" >

Website: 
<input type="text" name="website" value="<?php echo $website;?>" >

Untuk menampilkan data [komentar] yang telah diberikan oleh user pada bagian input [komentar] kita bisa menggunakan script PHP yang ditempatkan diantara tag <textarea> dan tag </textarea>.

Komentar: 
<textarea name="komentar" rows="5" cols="40"><?php echo $komentar;?></textarea>

Untuk menunjukkan yang dipilih oleh user pada bagian input [kelamin] setelah user menekan tombol submit kita bisa menggunakan atribut checked.

Kelamin:
<input type="radio" name="kelamin" <?php if (isset($kelamin) && $kelamin=="perempuan") echo "checked";?> value="perempuan">Perempuan
<input type="radio" name="kelamin" <?php if (isset($kelamin) && $kelamin=="lakilaki") echo "checked";?> value="lakilaki">Laki-laki

Code isset() function digunakan untuk memeriksa apakah variable $kelamin berisi data atau tidak. Code isset() function akan menghasilkan nilai boolean [true] jika sebuah variable tidak berisi nilai NULL.

Berikut ini adalah code lengkap web form:

Isi file webform.php 2:

<?php
// Membuat variable dan memasukkan nilai awal
$nama_error = $email_error = $kelamin_error = $website_error = "";
$nama = $email = $kelamin = $komentar = $website = "";

function validasi_form($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
};

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["nama"])) {
        $nama_error = "Nama belum dimasukkan";
    } else {
        $nama = validasi_form($_POST["nama"]);
        // Periksa jika nama hanya mengandung huruf dan spasi
        if (!preg_match("/^[a-zA-Z ]*$/",$nama)) {
            $nama_error = "Hanya bisa menggunakan huruf dan spasi";
        }
    }

    if (empty($_POST["email"])) {
        $email_error = "Email belum dimasukkan";
    } else {
        $email = validasi_form($_POST["email"]);
        // Periksa jika alamat email sudah benar
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $email_error = "Alamat email salah";
        }
    }

    if (empty($_POST["website"])) {
        $website = "";
    } else {
        $website = validasi_form($_POST["website"]);
        // Periksa penulisan alamat website (Regular expression di bawah ini mengijinkan garis sambung)
        if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
            $website_error = "Alamat URL salah, gunakan format www.alamatweb.com";
        }
    }

    if (empty($_POST["komentar"])) {
        $komentar = "";
    } else {
        $komentar = validasi_form($_POST["komentar"]);
    }

    if (empty($_POST["kelamin"])) {
        $kelamin_error = "Kelamin belum dipilih";
    } else {
        $kelamin = validasi_form($_POST["kelamin"]);
    }
};
?>

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Nama: 
<input type="text" name="nama" value="<?php echo $nama;?>"> * <?php echo $nama_error;?>
<br /><br />
Email: 
<input type="text" name="email" value="<?php echo $email;?>"> * <?php echo $email_error;?>
<br /><br />
Website: 
<input type="text" name="website" value="<?php echo $website;?>"> <?php echo $website_error;?>
<br /><br />
Komentar: 
<textarea name="komentar" rows="5" cols="40"><?php echo $komentar;?></textarea>
<br /><br />
Kelamin:
<input type="radio" name="kelamin" <?php if (isset($kelamin) && $kelamin=="perempuan") echo "checked";?> value="perempuan">Perempuan
<input type="radio" name="kelamin" <?php if (isset($kelamin) && $kelamin=="lakilaki") echo "checked";?> value="lakilaki">Laki-laki
* <?php echo $kelamin_error;?>
<br /><br />
<input type="submit" name="submit" value="Submit">
</form>

Hasil isi file webform.php 2:

Nama:
*

Email:
*

Website:

Komentar:

Kelamin:
Perempuan
Laki-laki
*


One Response to “Validasi nama, email dan website pada web form PHP”

  1. Hendri Agustino says:

    Pagi Bang Juju, mau tny dong, kenapa setelah saya menggunakan skrip validasi email diatas dan menggunakan nya di form file php saya, datany tetap terkirim ya meskipun sudah keluar pesan “alamat email salah”. Gimana ya untuk mencegah nya masuk ke database kalau alamat email ny belum benar. Sekian dan terima kasih sebelumnya atas bantuanny :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>