Custom Validation for Janrain form in a Drupal site using jquery-validate plugin

janrain_extra.js

/**
 * @file
 * JavaScript for Custom Janrain Requirements.
 */
(function($) {
    Drupal.behaviors.Janrain = {
        attach: function(context, settings) {

            // SetInterval to attach to janrain handlers.
            // Use intval incase janrain object not yet loaded.
            var janrain_events_attach = setInterval(function() {
                janrainExtraMenuAttachEventHandlers();
            }, 200);

            var VerificationCode = true;

            /**
             * Attach handlers to janrain events.
             */
            function janrainExtraMenuAttachEventHandlers() {
                // Has the janrain.events object been loaded?
                if (typeof janrain.events !== 'undefined') {

                    // Handler for Success Page Post Registration
                    janrain.events.onCaptureRenderComplete.addHandler(handleEmailVerificationSend);

                    // Bind Validation.
                    janrain.events.onCaptureRenderComplete.addHandler(handleValidation);
                    janrain.events.onCaptureRenderComplete.addHandler(handleCodeValidation);

                    // Stop all the Intervals.
                    clearInterval(janrain_events_attach);
                }
            }


            // Success Page Handler
            function handleEmailVerificationSend(result) {
                // Forcefully Render Notification Screen
                if (result.screen !== "emailVerificationNotification" && result.flow.name == "registration flow" && result.flow.form == "registrationForm" && result.flow.oneTimeRender == "emailNotVerified") {
                    // Forcefully Render Notification Screen.
                    janrain.capture.ui.renderScreen('emailVerificationNotification');
                }
            }


            function handleCodeValidation(result) {
                // Execute these only on registration Screen
                var screen = result.screen;

                var button = $('[data-capturescreenname="' + screen + '"] .capture_btn.capture_primary');

                if (screen == 'traditionalRegistration' || screen == 'socialRegistration') {
                    var professionDocumentation = $('input[name=professionDocumentation]');
                    $(professionDocumentation).change(function() {
                        $("div#capture_" + screen + "_form_item_professionocumentation").removeClass('capture_validated').removeClass('capture_validating');
                    });
                    $(professionDocumentation).blur(function() {
                        var value = professionDocumentation.val();
                        if (value.length <= 0) {
                            VerificationCode = true;
                        } else {
                            $.ajax({
                                type: 'POST',
                                url: Drupal.settings.basePath + 'validate/regcode/ajax',
                                dataType: 'json',
                                data: 'code=' + value + '&ajax_call=1',
                                success: function(data) {
                                    VerificationCode = true;
                                    if (data.validated) {
                                        VerificationCode = data.validated;
                                        console.log("Valid Verification Code");
                                        $("div#capture_" + screen + "_form_item_professionDocumentation").addClass('capture_validated');
                                    } else {
                                        console.log(data.msgtxt);
                                        $("div#capture_" + screen + "_form_item_professionDocumentation").addClass('capture_error').removeClass('capture_validated').removeClass('capture_validating');
                                        $("div#capture_" + screen + "_form_item_professionDocumentation div.capture_tip_error").html(data.msgtxt);
                                        VerificationCode = data.validated;
                                    }
                                },
                            });
                        }
                    });
                }

                // Stop Form Submit
                // Works only when Live Validation happens
                // This is duplicate, but on some scenario it was required
                button.click(function() {
                    if (!VerificationCode) {
                        console.log("Verification Code Validation " + VerificationCode);
                        return VerificationCode;
                    }
                });



            }

            // Custom Registration Form Validator
            function handleValidation(result) {

                // Execute these only on registration Screen
                var screen = result.screen;

                if (screen == 'traditionalRegistration' || screen == 'socialRegistration') {


                    var registrationform = "#capture_" + screen + "_registrationForm";

                    $(registrationform).attr('autocomplete', 'off');

                    var register_validate = $(registrationform).validate({
                        rules: {
                            addressStreetAddress1: {
                                required: true
                            },
                            addressCity: {
                                required: true,
                                alphaspace: true
                            },
                            addressPostalCode: {
                                required: true,
                                postal: true
                            },
                            professionType: {
                                validateselect: true
                            },
                            professionSpecialty: {
                                validateselect: true
                            },
                            professionState: {
                                validateselect: true
                            },
                            optInGeneralRegistration: {
                                required: true
                            }
                        },
                        messages: {
                            addressStreetAddress1: Drupal.t("Address is required."),
                            addressCity: {
                                required: Drupal.t("City is required."),
                                alphaspace: Drupal.t("Enter a valid city.")
                            },
                            addressPostalCode: {
                                required: Drupal.t("Postal Code is required."),
                                postal: Drupal.t("Enter a valid Postal code.")
                            },
                            professionType: Drupal.t("Profession is required."),
                            professionSpecialty: Drupal.t("Specialty is required."),
                            professionState: Drupal.t("Province is required."),
                            optInGeneralRegistration: Drupal.t("You Must Accept to Continue.")
                        },
                        onfocusout: function(element) {
                            $(element).valid();
                        },
                        focusInvalid: false,
                        errorElement: "span",
                        onkeyup: false,
                        ignore: ".jv_ignore",
                        errorClass: "capture_tip_error",
                        highlight: function(element) {
                            if ($(element).is(':checkbox')) {
                                $(element).closest("div[id$='item_inner_optInGeneralRegistration']").parent().addClass('capture_error');
                            } else {
                                $(element).parent().addClass('capture_error').removeClass('capture_validated');
                            }
                        },
                        success: function(element) {
                            $(element).parent().addClass('capture_validated').removeClass('capture_error');
                        },
                        errorPlacement: function(error, element) {
                            if (element.attr("name") == 'optInGeneralRegistration') {
                                $(element).closest("div[id$='item_inner_optInGeneralRegistration']").parent().find('.capture_tip_error').html(error);
                            } else {
                                error.insertAfter($(element));
                            }
                        }
                    });
                    $("input[name=emailAddress]").addClass('jv_ignore');
                    $("input[name=emailAddressConfirm]").addClass('jv_ignore');
                    $.validator.addMethod("alphaspace", function(value) {
                        var regex = /^[a-zA-Z ]*$/;
                        return regex.test(value);
                    });
                    $.validator.addMethod("postal", function(value) {
                        var regex = /[a-zA-Z][0-9][a-zA-Z](-| |)[0-9][a-zA-Z][0-9]/;
                        return regex.test(value);
                    });
                    $.validator.addMethod("validateselect", function(value) {
                        if (value == "not applicable") {
                            return false;
                        } else {
                            return true;
                        }
                    });

                    // Fix Exclamation Mark Issue
                    $("input[name=optInGeneralRegistration]").change(function() {
                        if (this.checked) {
                            $("div[id$='item_optInGeneralRegistration']").removeClass('capture_error');
                        }
                    });

                    var button = $('[data-capturescreenname="' + screen + '"] .capture_btn.capture_primary');


                    button.click(function() {

                        var firstName = $('input[name=firstName]').val();
                        var lastName = $('input[name=lastName]').val();
                        var emailAddress = $('input[name=emailAddress]').val();
                        var emailAddressConfirm = $('input[name=emailAddressConfirm]').val();
                        var newPassword = $('input[name=newPassword]').val();
                        var newPasswordConfirm = $("input[name=newPasswordConfirm]").val();

                        if (firstName && lastName &&
                            emailAddress && emailAddressConfirm && newPassword && newPasswordConfirm) {
                            console.log('Janrain Validation Success');
                            console.log('Verification Validation Status ' + VerificationCode);
                            if (VerificationCode) {
                                console.log('Custom Validation Status' + $(registrationform).valid());
                                return $(registrationform).valid();
                            }
                        }
                    });
                }
                // Custom Validator

            }
        }
    }

})(jQuery);