Form Validation in Material-Design for Bootstrap

I've been working on this side-project using Python and webpy -- a private social media page similar to that other site, but without the blatant feed manipulation and resale of user data.  For my eye-candy, I went with Material-Design for Bootstrap which, so far and for a back-end developer, I've been accomplishing quite a bit.  

One of the issues I ran into, early on, was being able to pass-back data to the form, via Ajax, so that a form would be updated in a visual manner consistent with MDB style.

When a form-field passed validation, the DOM is accessed and tweaked so that you're immediately rewarded with visual cues that tell you whether or not your input was acceptable to the system.  With MDB, you get a form field that looks like this on successful input:

Successful input is cued by the green under-bar and the work "ok"

Successful input is cued by the green under-bar and the work "ok"

Whereas, if input is not acceptable, then your form control would appear as this:

Unsuccessful input is cued with a red under-bar and appropriate error text

Unsuccessful input is cued with a red under-bar and appropriate error text

Using jQuery, I was able to reset the form-control's class and attribute settings triggered on the blur event.  Using the methods addClass() and removeClass() allows you to set the visual indicators (red or green bar) and setting the "data-success" and "data-error" attributes of the control allow you to set the text that appears beneath the input bar.

$(document).ready(function(){
    $('#register-form-password').blur(function()
    {
        var email = $(this).serialize();
        $.ajax({
            url: 'validate-password',
            type: 'POST',
            data: email,
            success: function(res){
                if (res == "success") {
                    $('#register-form-password').addClass('valid').removeClass('invalid');
                    $('#password_label').attr({'data-success': 'ok', 'data-error': ''});
                } else {
                    $('#register-form-password').addClass('invalid').removeClass('valid');
                    $('#password_label').attr({'data-error': res, 'data-success': ''});
                }
            }
        })
    });
});

Once I had this working, my next task was to prevent the submission of the form until all fields were validated.

I created a new key-up event against the form using any of the input fields that would grab the current value of the "data-success" attributes for each control.  These would next be evaluated and, if they were all "ok", I toggled the disabled property of the submit button off.

    $('#register-form').find('input').on('keyup', function()
    {
        ok_username = $('#username_label').attr('data-success');
        ok_name = $('#name_label').attr('data-success');
        ok_email = $('#email_label').attr('data-success');
        ok_pw = $('#password_label').attr('data-success');
        if (ok_pw == 'ok' && ok_username == "ok" && ok_name == "ok" && ok_email == "ok") {
            // console.log('enabling submit');
            $('#register-submit').prop('disabled', false);
        } else {
            // console.log('disabling submit');
            $('#register-submit').prop('disabled', true);
        }
    })

When traversing the form, each control is evaluated on the blur event and the form is evaluated on each key-up event.  When all of the controls pass validation, the submit button is instantly activated and when any previously-validated form is invalidated, the submit button is de-activated immediately.

Side note:  in the functions for the individual form controls, the Ajax requests passed to the route controller, handle the form field validation in Python.

Hope this helps someone else - I spent several hours tracking down/deriving this information!