Sunday, February 28, 2016

Kategori: ,

Form Validation dengan Menggunakan CheckValidity di HTML5

html tutorial


Tobi Web ID Tempatnya Cari Source Code Toko Online, Source Code Aplikasi PHP, Berbasis PHP dan MySQl, Source code CodeIgniter, Pengelolaan Data dengan Codeigniter, Contoh Program dengan PHP, Source Code eCommerce, Source Code dengan Laravel, cek source code website, source code toko online, source code toko online dengan php mysql


Pada postingan kali ini akan di paparkan cara Membuat Form Validasi menggunakan checkValidity dan Validity di HTML 5 menggunakan JavaScript, dilengkapi dengan contoh codenya.

Setelah meluncurkan versi HTML terbaru yaitu HTML5, jelas HTML memiliki banyak perbaikan dan perubahan atas standar saat ini. Sebagian besar fungsi, dimana dulu developer harus mengkustum code secara luas.

Dibawah ini ada contoh sample code bagaimana melakukan validasi FORM untuk elemen input HTML 5 menggunakan fitur Validity properti HTML5 yang terkait dengan proses validasi. Ini juga akan menunjukkan penggunaan checkValidity() fungsi yang dapat digunakan untuk mengidentifikasi apakah bentuk inputan sudah tervalidasi dengan benar.
Berikut script codenya, silahkan copy dan simpan pada folder project htdocs atau sejenis dengan nama terserah sobat  :


<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>HTML5 Sample Validation Page</title>
<style type="text/css">
body
{
    font-family:Arial;
    font-size:12px;
}
.valid
{
    color:#000000;
}
.invalid
{
    color:#FF0000;
}
</style>
</head>
<body>
<form id="form1" method="post">

<label>Umur: <input type="number" required="true" value="50" min="18" max="60" step="1" oninput="validate(this)"> (Antara 18 and 60)</label>


<div id="validateMsg"></div>

<div id="validity"></div>
<script>
    function validate(input) {
        var out = document.getElementById('validateMsg');
        if (input.validity) {
            if (input.validity.valid === true) {
                out.innerHTML = "<span class='valid'>" + input.value +
                            " Umur anda valid.</span>";
            } else {
                out.innerHTML = "<span class='invalid'>" + input.value +
                            " Umur anda tidak valid.</span>";
            }
        }
        document.getElementById('validity').innerHTML = "checkValidity() output: <span class='invalid'>" + input.checkValidity() + "</span>";
    }
</script> 
</form>
</body>
</html>

Elemen input adalah elemen nomor (yang menerima "Umur") dalam contoh ini, dengan nilai maksimum dan minimum yang ditetapkan langsung pada desain . [Jika informasi lebih lanjut diperlukan pada elemen input, lihat di sini.] Selama acara input pengguna , sebuah fungsi JavaScript validate ( ) dipanggil. Fungsi ini memvalidasi nilai input menggunakan properti input.validity.valid dan memberikan pesan yang tepat , setelah memeriksa untuk mendukung fungsi ini .

checkValidity() fungsi dipanggil untuk memeriksa dan memahami nilai itu kembali untuk skenario validasi sukses dan berhasil .


Berikut screenshot hasilnya :


Tobi Web ID Tempatnya Cari Source Code Toko Online, Source Code Aplikasi PHP, Berbasis PHP dan MySQl, Source code CodeIgniter, Pengelolaan Data dengan Codeigniter, Contoh Program dengan PHP, Source Code eCommerce, Source Code dengan Laravel, cek source code website, source code toko online, source code toko online dengan php mysql



Peringatan INVALID akan tampil otomatis jika inputan diisi dengan angka di bawah 18 dan diatas 60 dan peringatan VALID akan tampil otomatis jika inputan diisi dengan angka diantara 18 dan 60.

Sekian tutorial tentang form validation dengan checkValidity di HTML5, semoga bermanfaat.





Tobi Muhammad

Author & Editor

Tobi (Muhammad Tobi) adalah seorang Tukang Masak di perusahaan startup, suka sekali menulis dan mempelajari source code open source lisensi GNU di Github dll. Bisa pemrogramman web karena sering belajar dari contoh program yang ada di Github dll. Anak desa yang hanya lulusan Paket C.

0 comments:

Post a Comment

 

News Letters

Subscribe here to get our newsletter in your inbox, it is safe and EASY!

Tobi Web Indonesia