Merge pull request #16761 from edx/diana/hide-optional-fields-checkbox

LEARNER-3406: Fix registration fields bugs.

lms/static/js/student_account/views/RegisterView.js

@@ -113,6 +113,8 @@
                         }
                     }
 
+                    this.hasOptionalFields = optionalFields.length > 0;
+
                     html = this.renderFields(requiredFields, 'required-fields');
 
                     html.push.apply(html, this.renderFields(optionalFields, 'optional-fields'));
@@ -158,22 +160,16 @@
                 },
 
                 postRender: function() {
-                    var inputs = [
-                            this.$('#register-name'),
-                            this.$('#register-email'),
-                            this.$('#register-username'),
-                            this.$('#register-password'),
-                            this.$('#register-country')
-                        ],
+                    var inputs = this.$('.form-field'),
                         inputTipSelectors = ['tip error', 'tip tip-input'],
                         inputTipSelectorsHidden = ['tip error hidden', 'tip tip-input hidden'],
                         onInputFocus = function() {
                             // Apply on focus styles to input
-                            $(this).prev('label').addClass('focus-in')
+                            $(this).find('label').addClass('focus-in')
                                 .removeClass('focus-out');
 
                             // Show each input tip
-                            $(this).siblings().each(function() {
+                            $(this).children().each(function() {
                                 if (inputTipSelectorsHidden.includes($(this).attr('class'))) {
                                     $(this).removeClass('hidden');
                                 }
@@ -182,12 +178,12 @@
                         onInputFocusOut = function() {
                             // If input has no text apply focus out styles
                             if ($(this).val().length === 0) {
-                                $(this).prev('label').addClass('focus-out')
+                                $(this).find('label').addClass('focus-out')
                                     .removeClass('focus-in');
                             }
 
                             // Hide each input tip
-                            $(this).siblings().each(function() {
+                            $(this).children().each(function() {
                                 if (inputTipSelectors.includes($(this).attr('class'))) {
                                     $(this).addClass('hidden');
                                 }
@@ -196,12 +192,12 @@
                         handleInputBehavior = function(input) {
                             // Initially put label in input
                             if (input.val().length === 0) {
-                                input.prev('label').addClass('focus-out')
+                                input.find('label').addClass('focus-out')
                                     .removeClass('focus-in');
                             }
 
                             // Initially hide each input tip
-                            input.siblings().each(function() {
+                            input.children().each(function() {
                                 if (inputTipSelectors.includes($(this).attr('class'))) {
                                     $(this).addClass('hidden');
                                 }
@@ -211,13 +207,18 @@
                             input.focusout(onInputFocusOut);
                         },
                         handleAutocomplete = function() {
-                            inputs.forEach(function(input) {
-                                if (input.val().length === 0 && !input.is(':-webkit-autofill')) {
-                                    input.prev('label').addClass('focus-out')
-                                        .removeClass('focus-in');
-                                } else {
-                                    input.prev('label').addClass('focus-in')
-                                        .removeClass('focus-out');
+                            $(inputs).each(function() {
+                                var $input = $(this),
+                                    isCheckbox = $input.attr('class').indexOf('checkbox') !== -1;
+
+                                if (!isCheckbox) {
+                                    if ($input.val().length === 0 && !$input.is(':-webkit-autofill')) {
+                                        $input.find('label').addClass('focus-out')
+                                            .removeClass('focus-in');
+                                    } else {
+                                        $input.find('label').addClass('focus-in')
+                                            .removeClass('focus-out');
+                                    }
                                 }
                             });
                         };
@@ -234,6 +235,9 @@
                     // improvement so that we don't have to show all the optional fields.
                     // xss-lint: disable=javascript-jquery-insert-into-target
                     $('.checkbox-optional_fields_toggle').insertBefore('.optional-fields');
+                    if (!this.hasOptionalFields) {
+                        $('.checkbox-optional_fields_toggle').addClass('hidden');
+                    }
                     // xss-lint: disable=javascript-jquery-insert-into-target
                     $('.checkbox-honor_code').insertAfter('.optional-fields');
 
@@ -243,10 +247,14 @@
                         ev.preventDefault();
                         window.open($(this).attr('href'), $(this).attr('target'));
                     });
-                    $('#register-country option:first').html('');
-                    inputs.forEach(function(input) {
-                        if (input.length > 0) {
-                            handleInputBehavior(input);
+                    $('.form-field').each(function() {
+                        $(this).find('option:first').html('');
+                    });
+                    $(inputs).each(function() {
+                        var $input = $(this),
+                            isCheckbox = $input.attr('class').indexOf('checkbox') !== -1;
+                        if ($input.length > 0 && !isCheckbox) {
+                            handleInputBehavior($input);
                         }
                     });
                     setTimeout(handleAutocomplete, 1000);