Selamat datang kembali di website tips dan trik Dumet School, senang sekali rasanya kita berjumpa kembali. Oke pada kesempatan kali ini kita akan belajar tentang Cara Membuat Form Validasi Dengan Bootstrap dimana kita hanya perlu menambahkan saja javascript nya saja. Dan pada artikel sebelumnya kita sudah belajar membuat validasi wajib email, angka, dan huruf, teman – teman bisa di review di halaman sebelumnya pada website ini. Di bawah ini adalah sreenshoot yang nanti kita akan buat

Cara Membuat Form Validasi Dengan Bootstrap

Baik kali ini kita langsung saja implementasikan Cara Membuat Form Validasi Dengan Bootstrap teman – teman download terlebih dahulu file bootstrapnya di www.getbootstrap.com. Dan buka file index.html di text editornya kemudian copy script di bawah ini

<div class="container">
 <div class="page-header row" style="border:none;">
 <div class="col-md-5">
 <form id="formContoh">
 <div class="form-group">
 <label>Username</label>
 <input type="text" name="username" id="username" placeholder="Username" class="form-control" minlength="5" data-fv-stringlength-message="Username harus lebih dari 5 Karakter">
 </div>
 <div class="form-group">
 <label>Password</label>
 <input type="password" name="password" id="password" placeholder="Password" class="form-control" data-fv-stringlength-message="Minimal 10 Karakter">
 </div>
 <div class="form-group">
 <label>Confirm Password</label>
 <input type="password" name="repassword" placeholder="Password" class="form-control">
 </div>
 <div class="form-group">
 <label>Telepon</label>
 <input type="text" name="telepon" id="telepon" placeholder="telepon" class="form-control" onkeyup="checkNumber()" minlength="11" data-fv-stringlength-message="Telepon minimal 11 Karakter">
 </div>
 <div class="form-group">
 <label>Email</label>
 <input type="text" name="emailUser" id="emailUser" onchange="ValidateEmail()" placeholder="example@mail.com" class="form-control">
 </div>
 <div class="form-group">
 <label>Alamat</label>
 <textarea type="text" name="alamat" id="alamat" placeholder="alamat" class="form-control"></textarea>
 </div>
 <div class="form-group">
 <input type="submit" class="btn btn-primary" value="Submit">
 </div>
 </form>
 </div>
 </div>
</div>

Pastekan di dalam file index.html nya tepat di dalam tag <body>, jika sudah save dan jalankan pada browsernya

Cara Membuat Form Validasi Dengan Bootstrap

Maka hasilnya seperti gambar di atas ini, langkah berikutnya kita berikan perintah javascript nya untuk menjalankan validasi

<script type="text/javascript">
$(document).ready (function() {
 $('#formContoh').formValidation({
 framework: 'bootstrap',
 excluded: 'disabled',
 icon: {
 valid: 'glyphicon glyphicon-ok',
 invalid: 'glyphicon glyphicon-remove',
 validating: 'glyphicon glyphicon-refresh'
 },
 fields: {
 username: {
 validators: {
 notEmpty: {
 message: 'Username Tidak Boleh Kosong'
 }
 }
 },
 password: {
 validators: {
 notEmpty: {
 message: 'Password Tidak Boleh Kosong'
 },
 identical: {
 field: 'repassword',
 message: 'Samakan password dengan Confrim Password'
 } 
 }
 },
repassword: {
 validators: {
 notEmpty: {
 message: 'Confirm Password Tidak Sama'
 },
 identical: {
 field: 'password',
 message: 'Password Tidak sama'
 } 
 }
 },
 telepon: {
 validators: {
 notEmpty: {
 message: 'telepon Tidak Boleh Kosong'
 }
 }
 },
 emailUser: {
 validators: {
 notEmpty: {
 message: 'Email Tidak Boleh Kosong'
 },
 emailAddress: {
 message: 'Email Tidak Valid'
 }
 }
 },
 alamat: {
 validators: {
 notEmpty: {
 message: 'alamat Tidak Boleh Kosong'
 }
 }
 }
 }
 })
});
function checkNumber()
 {
 var validasiAngka = /^[0-9]+$/;
 var tahunLahir = document.getElementById("telepon");
 
 if (tahunLahir.value.match(validasiAngka)) {
 //alert("Tahun Lahir Kamu Adalah " + tahunLahir.value);
 } else {
 alert("Masukkan Format Wajib Angka!");
 tahunLahir.focus();
 return false;
 }
 }
function ValidateEmail(mail) 
{ 
 if (/mysite@ourearth.com/.test(emailUser)) 
 { 
 return (true) 
 } 
 alert("Masukkan e-Mail Dengan Benar") 
 return (false) 
}
</script>

Jika sudah save dan refresh pada browsernya, kemudian inputkan satu persatu pada form input. Jika tidak benar dalam penginputan maka validasi akan menolak datanya, jika terpenuhi maka data akan di proses. Baik sekian pada artikel kali ini tentang Cara Membuat Form Validasi Dengan Bootstrap kita berjumpa kembali pada artikel yang akan datang. Semoga bermanfaat dan kalian juga bisa bereksperimen sendiri dari latihan kita hari ini supaya lebih sempurna. Terimakasih Dan Sampai Jumpa