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

<form:form commandName="customer" action="/customer/add.html"
cssClass="form-horizontal formCustomer">

4. tambahkan script javascript ini pada akhir customer.jsp

<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>

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

Published by

saifiahmada

Begin a big Process with a bit trying

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s