Hi,
I am using a jquery to validate the form controlls and to shake them when they are invalid.
When i click submit it shows all the controlls shaking but , it loosing focus from all the controlls. i mean if a input box not filled in it shoud shake and the focus (cursor) should be in that box but now i can manage to do the shake but it is loosing the focus from the input box.
Please can any one help me please.
I am using the following jquery
<script type="text/javascript" language="javascript">
$().ready(function () {
$('#showLightDiv').hide();
$('#barcode1Image').hide();
$('#barcode2Image').hide();
$('#barcode3Image').hide();
$('#barcode4Image').hide();
$('#barcode5Image').hide();
$('#barcode6Image').hide();
$('#barcode7Image').hide();
$('#barcode8Image').hide();
$('#barcode9Image').hide();
$('#barcode1ImageWrong').hide();
$('#barcode2ImageWrong').hide();
$('#barcode3ImageWrong').hide();
$('#barcode4ImageWrong').hide();
$('#barcode5ImageWrong').hide();
$('#barcode6ImageWrong').hide();
$('#barcode7ImageWrong').hide();
$('#barcode8ImageWrong').hide();
$('#barcode9ImageWrong').hide();
$('#contactForm').validate({
rules: {
name: "required",
tel: "required",
province: "required",
catname: "required",
email: { required:true , email:true },
barcode1: "required",
barcode2: "required",
barcode3: "required",
barcode4: "required",
barcode5: "required",
barcode6: "required",
barcode7: "required",
barcode8: "required",
barcode9: "required"
},
messages: {
name: "Please enter your Name",
tel: "Please enter your Surname",
ddlProvince: "Mobile number is Required",
catname: "Cat's name required",
email: "Please enter email",
barcode1: "barcode required",
barcode2: "barcode required",
barcode3: "barcode required",
barcode4: "barcode required",
barcode5: "barcode required",
barcode6: "barcode required",
barcode7: "barcode required",
barcode8: "barcode required",
barcode9: "barcode required"
},
highlight: function (element, errorClass, validClass) {
$(element).stop()
.removeClass(validClass)
.addClass(errorClass)
.removeClass(validClass)
.effect('shake', {times: 4, distance: 5}, focus())
.css('border-color', 'Red')
;
},
unhighlight: function (element, errorClass, validClass) {
$(element).stop()
.removeClass(errorClass)
.addClass(validClass)
.css('border-color', '#d2d2d2');
},
errorPlacement: function(error,element){
}
});
});
</script>