Validasi nomor telepon javascript

14/02/2015 Aulia Rahmah Alhafidz 19854 Website

Untuk membuat validasi pada form, umumnya kita bisa menggunakan atribut yang bernama pattern yang ada di HTML. Namun, ada banyak cara yang bisa digunakan seperti contohnya dengan menggunakan JavaScript. Penggunaannya pun cukup mudah. Namun tetap menggunakan logika.

Berikut cara penggunaannya :

1. Buat Script HTML seperti berikut :

untuk beberapa kata yang diberi highlight merupakan hal penting yang akan digunakan di function JavaScript-nya.

2. Buat script JavaScriptnya seperti ini :

pada script var number=/^[0-9]+$/; itu artinya kita membuat variabel yang bernama number yang isinya mengecek atau mencocokan "Apakah karakter yang dimasukkan 0,1,2,3,4,5,6,7,8,9 atau angka saja?"

Hasilnya akan seperti berikut :

See the Pen ByYwVx by Dumet_School (@dumet_school) on CodePen.

No data.

Untuk memastikan agar form yang diisi benar, maka diperlukan yang namanya validasi. Dengan adanya validasi, setiap isian form akan dicek apakah sesuai dengan aturan atau tidak, misalnya nomer HP, maka karakter yang harus dimasukkan adalah karakter berupa angka.

Contoh validasi yang akan saya contoh adalah validasi email, kode pos dan nomer telepon.

Silahkan di copy dan di coba syntax berikut ini :

Code:

<html>
    <head>
        <title>Validasi Menggunakan Java Script</title>
        <style type="text/css">
            #kotak {
                background-color: #ffffff;
                padding: 20px;
                width: 600px;
                margin: auto;

            }
            #form {
                background-color: #232a3d;
                padding: 20px;

            }

            #form p{
                color: #ffffff;
            }

        </style>
        <script type="text/javascript">
            function Validasi(){

                var angka = "0123456789";
                var x = 0;
                var kodepos=document.getElementById('kodepos').value;
                var email=document.getElementById('email').value;
                var notelepon=document.getElementById('notelepon').value;
                if (email=="" || kodepos=="" || notelepon ==""){
                  alert("Ada form yang belum terisi");

             }

                if ((email.indexOf('@',0)==-1) || (email.indexOf('.',0)==-1)){
				alert("Email Kurang Tepat");

				}

                if (kodepos.length!=5) {
                    alert("kode pos harus 5 karakter");
                    return false;
                }

                if (notelepon.length!=12) {
                    alert("no telepon harus 12 karakter");
                    return false;
                }

                for (var i=0; i < kodepos||notelepon.length; i++) {
                    digita = "" + kodepos.substring(i, i+1);
					digitb = "" + notelepon.substring(i, i+1);
                    if (angka.indexOf(digita) == "-1") {
                        window.alert("Karakter pada Kode POs yang dimasukkan salah (harus angka semua)");
                        return false;
                    }

					if (angka.indexOf(digitb) == "-1") {
                        window.alert("Karakter pada No Telepon yang dimasukkan salah (harus angka semua)");
                        return false;
                    }

                }
                return true;

            }

        </script>
    </head>
    <body>

        <div id="kotak">

            <div id="form">
                <form method="post" onsubmit="return Validasi();">
                    <table align="center">
                        <tr>
                            <td align="left"><p><b>Email</b></p></td>
                            <td><p><b>:</b></p></td>
                            <td align="left"><input type="text" size="30" id="email"></td>

                        </tr>

                        <tr>
                            <td align="left"><p><b>Kode Pos</b></p></td>
                            <td><p><b>:</b></p></td>
                            <td align="left"><input type="text" id="kodepos"></td>

                        </tr>
                        <tr>
                            <td align="left"><p><b>No. Telepon</b></p></td>
                            <td><p><b>:</b></p></td>
                            <td align="left"><input type="text" id="notelepon"></td>

                        </tr>

                        <tr>
                            <td></td>
                            <td></td>
                            <td><input type="submit" name="submit" value="Kirim"></td>

                        </tr>
                </form>
                </table>

            </div>
        </div>

    </body>

</html>