Menginput kontak nomor telephone, pasti teman-teman pernah melakukannya, apa lagi sekarang jamanya teknologi, dimana orang-orang mempunyai sebuah kontak dengan beberapa orang di dalamnya ada saudara, teman, kerabat dan lain-lain pasti teman-teman sendiri sebelumnya menginput nama dan nomor telephonenya bukan. tapi disini kita akan belajar membuat validasi menginput kontak nomor telephone dengan jquery, jadi kita akan membuatnya supaya nomor telephone yang dimasukan itu sesuai dengan format yang harus di input, oke jangan kemana-mana simak terus ya teman-teman.
nanti disini kita akan membuat validasi menginput kontak nomor telephone dengan jquery, dimana persyaratannya seperti ini:
- Dimana inputan nama dan nomor telephone tidak boleh kosong
- nama tidak boleh lebih dari 20 huruf.
- No telephone minimal harus 6 dan maksimal harus 12
- dan ketika user memasukan huruf di form pengisian telephone, maka akan tampil error, jadi no telephone boleh diisi dengan angka + (plus).
Disini saya menggunakan template materialize ya teman-teman supaya rapi dan bagus, Seperti judulnya saya menggunakan jquery ya teman-teman, dan sedikit sentuhan regExp untuk mencocokannya supaya form pengisian nomor telephone tidak bisa di input sembarangan. Oke bagaimana cara membuatanya seperti ini ya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<!DOCTYPE html> <html> <head> <title>Membuat Validasi Menginput Kontak Nomor Telephone dengan Jquery</title> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8"> <style type="text/css"> .nameClass{ color: #f44336 } </style> </head> <body> <div class="row"> <form class="col s12"> <div class="row"> <div class="col s12"> <h4>Membuat Validasi Menginput Kontak Nomor Telephone dengan Jquery</h4> </div> <div class="input-field col s6"> <i class="material-icons prefix">account_circle</i> <input id="icon_prefix" type="text" class="validate"> <label for="icon_prefix">First Name</label> <div id="nameError"><span id="spanNameError" class="nameClass"></span></div> </div> <div class="input-field col s6"> <i class="material-icons prefix">phone</i> <input id="icon_telephone" type="tel" class="validate"> <label for="icon_telephone">Telephone</label> <div id="error"><span id="hasilError" class="nameClass" ></span></div> </div> <div class="col s12 te"> <a class="btn-floating btn-large waves-effect waves-light red" id="btnAdd" style="float: right;"><i class="material-icons">add</i></a> </div> </div> </form> </div> <!--Import jQuery before materialize.js--> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $("document").ready(function(){ $("#nameError").hide(); $("#error").hide(); $("#btnAdd").click(function(e){ e.preventDefault() var nameNode = $("#icon_prefix").val() if(nameNode == ""){ $("#nameError").show(); $("#spanNameError").html("Maaf masukan paling gak satu huruf aja"); }else if(nameNode.length > 20){ $("#nameError").show(); $("#spanNameError").html("Nama terlalu panjang anda memasukan <u> " +nameNode.length+ " </u> huruf, Max 20 huruf"); }else{ $("#nameError").hide(); } // bagian no tlp var tlpNode = $("#icon_telephone").val(); if(tlpNode == ""){ $("#error").show(); $("#hasilError").html("ketik satu angka aja repot amat"); }else if(validasi(tlpNode)){ $("#error").show(); $("#hasilError").html("No Telephone ya harus angka toh mas "); }else if(tlpNode.length > 12 || tlpNode.length < 7 ){ $("#error").show(); $("#hasilError").html("Anda memasukan <u> " +tlpNode.length+ " </u> digit, minimal 7 digit dan maksimal 13 digit om"); }else{ $("#error").hide(); } }) function validasi(tlp){ var tool = new RegExp(/[^0-9-+]/g) return tool.test(tlp) } }) </script> <script type="text/javascript" src="js/materialize.min.js"></script> </body> </html> |
silahkan teman-teman copy kode di atas ya, supaya tau hasil dari kode di atas, oke tampilan diatas seperti ini ya:
bisa di lihat ya, yang atas adalah tampilan pertama masih kosong ya, dan yang bawah di mana saya belum menginputkan sebuah field tapi sudah saya klik buttonnya. jadi akan keluar teks errornya seperti itu ya, oke kurang lebih seperti itu ya teman-teman belajar tentang membuat validasi menginput kontak nomor telephone dengan jquery, dan saya harap teman-teman paham, dan sampai jumpa pada artikel selanjutnya terimakasih.