Prasath Vkl Prasath Vkl - 3 months ago 11
jQuery Question

Jquery validation and scrolltop Not working

I have tried this jquery validation for registration page... When i click submit the error box shows..... I have two issues with this..


  • If i have focused on the input fields the error box were hided

  • Scrolltop was working.. But i want smoother scrolltop





var RegisterController = function () {
$("#register_f").validate({
rules: {
first_name: "required",
email: {
required: true,
email: true,
remote: {
url: ajaxurl + 'user/availability',
type: "post",
data:
{
email: function ()
{
return $('#email').val();
}
}
},
},
password1: {"required": true, minlength: 6},
password2: {"required": true, equalTo: "#password1"},
"day": "required",
"month": "required",
"year": "required"
},
messages: {
first_name: "Firstname is required",
email: {
required: "Email is required",
email: "Invalid Email",
remote: $.validator.format("{0} is already taken.")
},
password1: {
required: "Password is Required",
minlength: "Password Minimum length is 6 Characters"
},
password2: {
equalTo: "password Does not match",
required: "Confirm Password is required"
},
month: "Please Select month",
day: "Please Select day",
year: "Please Select year"
},
errorPlacement: function (error, element) {
},
showErrors: function (errorMap, errorList) {

if (submitted) {
var summary = '<h4>' + this.numberOfInvalids() ;
summary += '</ul></div>';
$("#errormessages").html(summary);
$(document).scrollTop(0);
submitted = false;
}

//--> if you dont want to see the errors in line remove this below line?
this.defaultShowErrors();
},
invalidHandler: function (form, validator) {
submitted = true;
},
submitHandler: function (form) {
ajaxindicatorstart();
var formdata = global.FormData.serializeArrayToKeyPair($(form).serializeArray());
formdata['action'] = 'create';
global.CommonAjaxMethod.loadAjaxfunc(ajaxurl + 'register/ajax_request', 'POST', formdata, 'register_success');
}
});
$("#register_f").submit();
}




Answer

For Smooth Animation :

 $('html, body').animate({scrollTop: '0px'}, 1200, 'linear');
Comments