client side validator menggunakan jquery validation | java php laravel linux mysql sql bootstrap html css query java php laravel linux mysql sql bootstrap html css query: client side validator menggunakan jquery validation

Saturday, December 27, 2014

client side validator menggunakan jquery validation

Masih lanjut

Bismillah

q> Lanjutkan gan :
https://saifiahmada.wordpress.com/2014/12/27/server-side-validator-menggunakan-hibernate-validator/

q> Langkah-langkah :
1. buka halaman http://jqueryvalidation.org/

2. find (Ctrl+F) : ajax CDN
copy link http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js
paste pada file classic.jsp

Selection_640

3. tambahkan class "formCustomer" untuk tag <form:form> pada customer.jsp

[sourcecode language="xml"]<form:form commandName="customer" action="/customer/add.html"
cssClass="form-horizontal formCustomer">[/sourcecode]


4. tambahkan script javascript ini pada akhir customer.jsp


[sourcecode language="javascript"]<script type="text/javascript">
$(document).ready( function() {
$(".formCustomer").validate(
{
rules : {
nama : {
required : true,
minlength : 3
},
alamat : {
required : true,
minlength : 5
},
noHp : {
required : true,
minlength : 11
}
},
highlight : function (element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight : function (element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
}
}

);

});
</script>[/sourcecode]


q> Hasil :

q> Hasil sebelum script highlight dan unhighlight ditambahkan pada javascript

Selection_638
q> Hasil setelah script highlight dan unhighlight ditambahkan pada javascript

Selection_639

Alhamdulillah

No comments:

Post a Comment

saifiahmada.com adalah blog belajar programming Indonesia, membahas lengkap materi bahasa pemrograman: code HTML, CSS, Bootstrap, Desain, PHP, MySQL, coding Java, Query, SQL, dan dunia linux