#61 Cara membuat form validasi pada html

pada tutorial ini kita akan belajar cara membuat form validasi pada html.

Deskripsi

validasi sebelum html5 dilakukan memakai javascript pada sisi client, sekarang validasi pada html sudah bisa diterapkan secara otomatis oleh browser berdasarkan atribut khusus pada elemen input tersebut.

saat menginput data yang akan dikirimkan ke server semua masukan akan di validasi sebelum dikirimkan ke server.

beberapa input type yang baru seperti email, url, tel dan banyak lagi secara otomatis divalidasi dan tidak diperlukan membuat validasi sendiri menggunakan javascript.

Baca juga : membuat input password, url, email, tel, search dan hidden pada html

validasi required

atribut required digunakan ketika bidang ini harus wajib diisi untuk lulus validasi.

<input required>Code language: HTML, XML (xml)

required termasuk atribut boolean yang hanya menulisnya tanpa mengisi nilai atribut.

<input type="text" name="nama" required>Code language: HTML, XML (xml)

misalnya ketika ada salah satu bidang input yang kosong karena lupa mengisi, maka akan ada pesan validasinya.

validasi panjang Minimum atau maksimum

Gunakan atribut minlength dan maxlength untuk menunjukan persyaratan panjang yang di input.

atribut minlength menentukan jumlah minimum karakter yang dibutuhkan dalam sebuah bidang input.

<input type="password" name="password" minlength="8">Code language: HTML, XML (xml)

misalnya pada sebuah inputan password yang membutuhkan minimal 8 karakter, jika karakter kurang maka akan muncul pesan validasi seperti berikut.

atribut maxlength menentukan jumlah maksimum karakter yang di izinkan dalam menginput data.

<input type="text" name="username" maxlength="10">Code language: HTML, XML (xml)

contoh pada saat menginput username yang tidak boleh lebih dari 10 karakter, maka akan dibatasi.

pada saat kita menginput thohirdeveloper maka karakter yang bisa hanya thohirdeve tidak boleh lebih dari 10 karakter.

validasi rentang angka

untuk membatasi rentang angka yang dapat dimasukkan pengguna ke dalam input angka atau rentang angka gunakan atribut min dan max.

pada tutorial sebelumnya kita telah menerapkan validasi saat membuat rentang input angka pada html. atribut ini juga bisa diterapkan pada type number.

misalkan input umur harus lebih dari 20 dan maksimal 50

<input type="number" name="umur" min="10" max="50"/>Code language: HTML, XML (xml)

apabila menginput angka 2 maka akan muncul pesan validasi

jika lebih dari 50 maka akan muncul juga pesan validasinya

validasi pola

maksudnya pola disini adalah atribut pattern untuk menentukan ekspresi apapun yang harus cocok untuk di validasi

misalnya ketika ingin menginput nomor hp yang isinya dibagi menjadi 4 inputan dengan inputan 1-9 dan hanya boleh di isi 3 nomor.

<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" title="hanya boleh 3 nomor"/>
<input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" title="hanya boleh 3 nomor"/>
<input name="tel3" type="tel" pattern="[0-9]{3}" placeholder="###" title="hanya boleh 3 nomor"/>
<input name="tel4" type="tel" pattern="[0-9]{3}" placeholder="###" title="hanya boleh 3 nomor"/>Code language: HTML, XML (xml)

apabila kita hanya mengisi 2 nomor maka akan muncul teks pesan validasi yang telah kita buat.

contoh pattern lain yang bisa digunakan misal membatasu nilai 4-8 karakter dengan huruf kecil semua seperti code dibawah ini

<input pattern="[a-z]{4,8}" title="isi 4 - 8 karakter dan huruf kecil" >Code language: HTML, XML (xml)

saat mengisi yang input data yang tidak cocok dengan pattern maka akan muncul validasi sampai pola tersebut cocok.

validasi tipe file upload

pada saat menginput file pada input type=”file” dimungkinkan untuk menerima jenis file tertentu, seperti video, gambar, aufio, atau ekstensi file tertentu atau media tertentu.

contohnya saat ingin menentukan hanya gambar saja yang diperbolehkan untuk diupload.

<input type="file" accept="image/*" title="Hanya gambar yang disetujui">Code language: HTML, XML (xml)

saat kita klik tombol Choose File untuk upload sistem operasi akan disable file selain ektensi gambar.

kita juga bisa menentukan beberapa nilai ektensi yang boleh diupload dengan koma, misalnya

<input type="file" accept="image/*, .mp4, .rar, .zip">Code language: HTML, XML (xml)

format gambar atau ektensi .mp4 , .rar .zip yang boleh diupload

form tidak ingin divalidasi

kita juga bisa membuat form supaya tidak di validasi walaupun type nya submit. contoh perbedaan tombol submit dibawah ini.

<input type="submit" value="kirim"> <!-- form akan divalidasi -->
<input type="submit" value="simpan" formnovalidate> <!-- form tidak divalidasi -->Code language: HTML, XML (xml)

pada saat menekan tombol kirim form akan divalidasi sedangkan jika klik tombol simpan tidak akan divalidasi karena menggunakan atribut formnovalidate

Latihan

semua yang sudah kita pelajari diatas bisa dicoba dengan menekan tombol biru Coba Script.

<!DOCTYPE html>
<html>
<head>
    <title> input validasi pada html </title>
</head>
<body>
    <form>
        <input type="text" name="nama" required> <br /><br />
        <input type="password" name="password" minlength="8" required> <br /><br />
        <input type="text" name="username" maxlength="10" required> <br /><br />
        <input type="number" name="umur" min="10" max="50" required /> <br /><br />
        <input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" title="hanya boleh 3 nomor" />
        <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" title="hanya boleh 3 nomor" />
        <input name="tel3" type="tel" pattern="[0-9]{3}" placeholder="###" title="hanya boleh 3 nomor" />
        <input name="tel4" type="tel" pattern="[0-9]{3}" placeholder="###" title="hanya boleh 3 nomor" /> <br /><br />
        <input pattern="[a-z]{4,8}" title="isi 4 - 8 karakter dan huruf kecil"> <br /><br />
        <input type="file" accept="image/*" title="Hanya gambar yang disetujui"> <br /><br />
        <input type="file" accept="image/*, .mp4, .rar, .zip"> <br /><br />
        <input type="submit" value="kirim"> <!-- form akan divalidasi -->
        <input type="submit" value="simpan" formnovalidate> <!-- form tidak divalidasi -->
    </form>
</body>
</html>Code language: HTML, XML (xml)

Demikian tutorial cara membuat form validasi pada html, semoga bermanfaat bagi teman-teman dan sampai jumpa pada tutorial berikutnya 🙂

Pencarian di thohirdev:

• validasi html 5
• mengatur validasi angka html
• contoh validasi html
• cek validasi html