Validasi Text Box Tanpa Menggunakan JavaScript di HTML 5

466

HTML 5 menyediakan attribut required dan placeholder pada element Text Box yang dapat digunakan untuk validasi input yang mungkin wajib diisi (required) atau sebagai pemandu user yang akan mengisi input element tersebut. Ketika form di-submit, halaman web tidak akan menuju ke bagian selanjutnya sebelum text box bersangkutan terisi. Sebelum HTML 5, JavaScript Validasi TextBox Name, Email dan Comment Menggunakan JavaScript diperlukan untuk melakukan validasi tanpa reload halaman.

Atribut placeholder didukung di semua browser utama, kecuali Internet Explorer. Sementara, required bekerja di semua browser utama, kecuali Internet Explorer dan Safari.

Berikut adalah contoh tampilan halaman:

validasiTextBox1

Halaman web saat  tombol Submit di click tanpa mengisi input text box:

validasiTextBox2

Contoh Skrip:

<html>
<head>
<title>Validasi Text Box di HTML 5</title>
</head>
<body>
<h2>Validasi Text Box di HTML 5</h2>
<p>
<form name=”formTest” id=”formTest” action=”#” method=”post”>
<input name=”textBox” type=”text” id=”textBox” size=”30″ required=”required” placeholder=”Text Box ini harus diisi” />
<input name=”btnSubmit” id=”btnSubmit” type=”submit” value=”Submit” />
</form>
</p>

<?php

//Data Form setelah di submit

if(isset($_POST[‘btnSubmit’])){

echo ‘<p>Data Form setelah tombol Submit di <i>click</i></p>’;

echo ‘<p>Isi textBox: ‘.$_POST[‘textBox’].'</p>’;

}

?>

</body>
</html>

–SEMOGA BERMANFAAT–