Cara Membuat Form Validasi Dengan Bootstrap
Selamat datang kembali di laman tips dan trik Source Code Aplikasi, senang sekali rasanya kita berjumpa kembali. Oke di kesempatan kali ini kita akan belajar mengenai Cara Membuat Form Validasi Dengan Bootstrap dimana kita hanya perlu menambahkan saja javascript nya saja. Dan di artikel sebelumnya kita telah belajar membangun validasi wajib email, angka, dan huruf, teman – teman dapat di review di halaman sebelumnya di laman ini. Di bawah ini yakni sreenshoot yang nanti kita akan bikin
Bagus kali ini kita seketika saja implementasikan Cara Membuat Form Validasi Dengan Bootstrap teman – teman unduh 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 mesti 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>Tempat tinggal</label>
<textarea type=text name=domisili id=domisili placeholder=domisili 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 pada file index.html nya tepat di pada tag <body>, seandainya telah save dan jalankan di browsernya
Karenanya hasilnya seperti gambar di atas ini, langkah berikutnya kita berikan command javascript nya bagi 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 Tak Boleh Kosong'
}
}
},
password: {
validators: {
notEmpty: {
message: 'Password Tak Boleh Kosong'
},
identical: {
field: 'repassword',
message: 'Samakan password dengan Confrim Password'
}
}
},
repassword: {
validators: {
notEmpty: {
message: 'Confirm Password Tak Sama'
},
identical: {
field: 'password',
message: 'Password Tak sama'
}
}
},
telepon: {
validators: {
notEmpty: {
message: 'telepon Tak Boleh Kosong'
}
}
},
emailUser: {
validators: {
notEmpty: {
message: 'Email Tak Boleh Kosong'
},
emailAddress: {
message: 'Email Tak Valid'
}
}
},
domisili: {
validators: {
notEmpty: {
message: 'domisili Tak Boleh Kosong'
}
}
}
}
})
});
function checkNumber()
{
var validasiAngka = /^[0-9]+$/;
var tahunLahir = document.getElementById(telepon);
if (tahunLahir.value.match(validasiAngka)) {
//alert(Tahun Lahir Kamu Yaitu + 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>
Apabila telah save dan refresh di browsernya, kemudian inputkan satu persatu di form input. Apabila tak benar pada penginputan karenanya validasi akan menolak datanya, seandainya terpenuhi karenanya data akan di proses. Bagus demikianlah di artikel kali ini mengenai Cara Membuat Form Validasi Dengan Bootstrap kita berjumpa kembali di artikel yang akan datang. Semoga bermanfaat dan kalian pun dapat bereksperimen sendiri dari latihan kita hari ini supaya lebih sempurna. Terimakasih Dan Hingga Jumpa
Sumber https://kursuswebsite.org
