0

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.

Community
  • 1
  • 1
wraasch
  • 405
  • 3
  • 13
  • *"plus another custom file"* ... problem is likely there or your remote validation is taking a long time. Can use [jQuery global ajax handlers](http://api.jquery.com/category/ajax/global-ajax-event-handlers/) to monitor the remote checking – charlietfl Sep 14 '16 at 17:00
  • also why aren't you just using `required` on the `tos`? Note that triggering jQuery submit will run validation again and your alert won't prevent form submitting either – charlietfl Sep 14 '16 at 17:03
  • Thanks for the tos suggestion. There were a couple of minor reasons for making it an alert, but I just fixed the minor issues, and changed the register.js script. – wraasch Sep 14 '16 at 18:39
  • I monitored the ajax remote checking and all calls start and complete during the filling out of the form. They do not seem to be involved in the delay after submitting the form. I did see this error in the console after submitting: `jquery-1.10.2.js:2822 Uncaught RangeError: Maximum call stack size exceeded` Could it be a clue? – wraasch Sep 14 '16 at 18:40
  • i think that your manually triggering submit is the root of problem and causing validation to run over and over again. Are you seeing lots of ajax calls for the remote email & username? – charlietfl Sep 14 '16 at 18:44
  • try changing to `$('.register-form')[0].submit();` – charlietfl Sep 14 '16 at 18:46
  • I think you are definitely right, but not sure how to fix it. The ajax calls only occur twice (once when I complete the username field and once when I complete the email field). The console isn't logging them after I submit the form and when the delay occurs. I tried inserting the `[0]` as suggested but that prevents me from registering at all. – wraasch Sep 14 '16 at 19:05
  • Changing it to `$('.register-form')[1].submit();` worked though...do you have any documentation or insight into why that works? Is it generally compatible with all browsers and mobile? – wraasch Sep 14 '16 at 19:36
  • the reason is that validation plugin blocks the jquery submit event... the `[1]` returns the actual native dom form element and thus uses native submit which jQuery doesn't listen to. You were causing a race condition since the validation was stuck in an infinite loop – charlietfl Sep 14 '16 at 19:40

1 Answers1

0

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/

jkozlowski
  • 178
  • 10