wraasch wraasch - 2 months ago 9
jQuery Question

Validation Taking 5-10 sec on Form Submit

I have a very simple registration form only requiring a username, email, and password. I am trying to see why it takes 5-10sec to complete the registration after the user submits. I tried profiling on the server-end (see here), and have eliminated that as the problem.

It looks like my issue is the client-side validation. I am using the https://jqueryvalidation.org/ JS file plus another custom file that tells the user if they are trying to use a name or password that already exists:

$('.register-form').validate({

submitHandler: function(form){

$('.register-form').submit();

},

rules: {
password: {
required: true
},

tos: {
required: true
},

username: {
required: true,
remote: '/api/v1/users/username/'
},

email: {
required: true,
email: true,
remote: '/api/v1/users/email/'
},

},

messages: {
first_name: {
required: 'Please include your first name.'
},

last_name: {
required: 'Please include your last name.'
},

password: {
required: 'Please create a password'
},

tos: {
required: 'Please check that you agree to our TOS and Privacy Policy'
},

email: {
required: 'Please include your email.',
email: 'Please insert a valid email address.',
remote: 'This email is already in use.'
},

username: {
required: 'Please create a username.',
remote: 'This username is already in use.'
}

}

});


When I use Chrome's profiling (picture link), it looks like the problem is about 10sec of thousands of tiny tasks where register.js and the jquery.validator.js are calling each other. Specifically, its always submitHandler: function(form) line that is triggered on register.js. So I think I see the problem, but I am not clear on how to interpret it or fix it.

Any ideas? I am pretty new to using these validation plug-ins.

Answer

this line

$('.register-form').submit();

should read

form.submit();

so the function should look like this

$('.register-form').validate({
  submitHandler: function(form) {
    form.submit();
  },

   rules:...
});

other wise you keep recursively calling submit

from the documentation

Example: Use submitHandler to process something and then using the default submit. Note that "form" refers to a DOM element, this way the validation isn't triggered again.

https://jqueryvalidation.org/validate/

Comments