Setting Validasi Textbox form pada php, OnFocus, OnBlur, Placeholder dan Requied

Setting Validasi Textbox form pada php, OnFocus, OnBlur, Placeholder dan Requied

Baiklah agan semua kali ini saya akan menulis artikel tentang bagaimana caranya mengatur validasi textbox form pada php. Ini hanya sekedar berbagi pengalaman kepada rekan-rekan sekalian, karena sewaktu ketika saya pernah mengalami kesulitan bagimana caranya melakukan validasi pada textbox form php.

• TextBox Polos Tanpa Validasi

1. Seperti biasa buka terlebih dahulu aplikasi dreamweaper pada laptop anda

2. Kemudian buka new document dengan Page Type : Php 

3. Buatlah sebuah form seperti dibawah ini :

atau copas saja source codenya berikut ini:
<form id="form1" name="form1" method="post" action=""> <table width="400" border="1"> <tr> <td colspan="2">TextBox Polos Tanpa Validasi</td> </tr> <tr> <td>Textbox1</td> <td><label for="txt1"></label> <input name="txt1" type="text" id="txt1" value="Tambahkan keterangan disini" size="40"></td> </tr> <tr> <td>Textbox2</td> <td><label for="txt2"></label> <input name="txt2" type="text" id="txt2" value="Tambahkan keterangan disini" size="40"></td> </tr> <tr> <td>Textbox3</td> <td><label for="txt2"></label> <input name="txt2" type="text" id="txt2" value="Tambahkan keterangan disini" size="40"></td> </tr> <tr> <td> </td> <td><input type="submit" name="button" id="button" value="Simpan" /></td> </tr> </table> </form>

 
3. Jika sudah, Simpan pada htdocs-nya, kemudian coba d akses melalui localhost, tambahkan keterangan atau ketikkan sesuatu pada textbox kemudian tekan tombol Simpan.

 

4. Amati apa yg terjadi? tentu tidak terjadi apa-apa bukan?? iy, karena kita belum menambahan perintah validasi pada textboxnya...

5. Ikuti penjelasan salanjutnya

• TextBox Dengan Validasi pada OnFocus dan OnBlur  

 1. Ikuti langkah 1 sampai 3 seperti diatas
2. Tambahkan code dibawah pada masing masing textbox tersebut
onblur="if (this.value == '') {this.value = 'Tambahkan keterangan disini';}" onfocus="if (this.value == 'Username') {this.value = '';}"   
atau copas saja codenya secara keseluruhan :
<form id="form1" name="form1" method="post" action=""> <table width="400" border="1"> <tr> <td colspan="2">TextBox Polos Tanpa Validasi</td> </tr> <tr> <td>Textbox1</td> <td><label for="txt1"></label> <input name="txt1" type="text" id="txt1" value="Tambahkan keterangan disini" size="40" onblur="if (this.value == '') {this.value = 'Tambahkan keterangan disini';}" onfocus="if (this.value == 'Tambahkan keterangan disini') {this.value = '';}" ></td> </tr> <tr> <td>Textbox2</td> <td><label for="txt2"></label> <input name="txt2" type="text" id="txt2" value="Tambahkan keterangan disini" size="40" onblur="if (this.value == '') {this.value = 'Tambahkan keterangan disini';}" onfocus="if (this.value == 'Tambahkan keterangan disini') {this.value = '';}" ></td> </tr> <tr> <td>Textbox3</td> <td><label for="txt2"></label> <input name="txt2" type="text" id="txt2" value="Tambahkan keterangan disini" size="40" onblur="if (this.value == '') {this.value = 'Tambahkan keterangan disini';}" onfocus="if (this.value == 'Tambahkan keterangan disini') {this.value = '';}" ></td> </tr> <tr> <td> </td> <td><input type="submit" name="button" id="button" value="Simpan" /></td> </tr> </table> </form>
3. Jika sudah, Simpan pada htdocs-nya, kemudian coba d akses melalui localhost, tambahkan keterangan atau ketikkan sesuatu pada textbox kemudian tekan tombol Simpan. kemudian amati apa yang terjadi!!!
4. Kelemahan dari validasi ini yaitu form akan tetap dieksekusi walaupun user belum menambahkan text apapun.Karena php sudah menganggap bahwa field textbox sudah berisi value. Value yang dimaksud yaitu "Tambahan keterangan disini", maka value itulah yang akan dikirim untuk mengisi variabel.   

• Textbox dengan validasi placeholder dan required

1. Sama halnya dengan step by step diatas,,  cuma kita perlu mengganti properti text pada onFocus dan OnBlur nya saja dengan properti placeholder

2. Untuk lebih jelas, perhatikan code dari text setelah di ganti dengan properti placeholder... 

3.