AJAX Registration Check

Throws error on submit if form contains errors - AJAX Registration Check

Throws error on submit if form contains errors

by BadBlock » Mon Dec 10, 2018 7:46 am

In my registration form, there are additional fields that are checked on submit by PHP.
On error (e.g. incomplete/erroneous input), the user is presented with the same form again.
The extension here throws the following error in console (and breaks all subsequent JS on the page):

Code: Select all

ajaxregistrationcheck.js?assets_version=139:100 Uncaught TypeError: Cannot read property 'val' of undefined
    at HTMLInputElement.<anonymous> (ajaxregistrationcheck.js?assets_version=139:100)
    at HTMLInputElement.dispatch (jquery.min.js?assets_version=139:3)
    at HTMLInputElement.r.handle (jquery.min.js?assets_version=139:3)
    at Object.trigger (jquery.min.js?assets_version=139:3)
    at HTMLInputElement.<anonymous> (jquery.min.js?assets_version=139:3)
    at Function.each (jquery.min.js?assets_version=139:2)
    at n.fn.init.each (jquery.min.js?assets_version=139:2)
    at n.fn.init.trigger (jquery.min.js?assets_version=139:3)
    at HTMLDocument.<anonymous> (ajaxregistrationcheck.js?assets_version=139:136)
    at j (jquery.min.js?assets_version=139:2)
The error "TypeError: Cannot read property 'val' of undefined" occurs in ajaxregistrationcheck.js on line 100.

This is happening because this is triggered on page load:

Code: Select all

    passwordField.trigger('keyup');
and, because "valid" is "true", it starts using "usernameField" and "eMailField" vars, which are at this stage both undefined.

SOLUTION

Move these two lines

Code: Select all

    var usernameField = $('#username');
    var eMailField = $('#email');
higher in code to the beginning of the function, so as to put them after line 28, right after this:

Code: Select all

var passwordField = $('#new_password');
User avatar
BadBlock
Registered User
Posts: 81
Joined: Sat Oct 06, 2001 8:33 pm