diff --git a/common/static/js/spec_helpers/edx.utils.validate.js b/common/static/js/spec_helpers/edx.utils.validate.js index cf41b58568..b17ed04b24 100644 --- a/common/static/js/spec_helpers/edx.utils.validate.js +++ b/common/static/js/spec_helpers/edx.utils.validate.js @@ -13,9 +13,9 @@ var edx = edx || {}; email: '
  • A properly formatted e-mail is required
  • ', min: '
  • <%= field %> must be a minimum of <%= count %> characters long
  • ', max: '
  • <%= field %> must be a maximum of <%= count %> characters long
  • ', - password: '
  • A valid password is required
  • ', required: '
  • <%= field %> field is required
  • ', - terms: '
  • To enroll you must agree to the Terms of Service and Honor Code
  • ' + terms: '
  • To enroll you must agree to the Terms of Service and Honor Code
  • ', + custom: '
  • <%= content %>
  • ' }, field: function( el ) { @@ -28,6 +28,7 @@ var edx = edx || {}; isBlank = _fn.validate.isBlank( $el ); if ( _fn.validate.isRequired( $el ) ) { +console.log('is required'); if ( isBlank ) { required = false; } else { @@ -40,7 +41,7 @@ var edx = edx || {}; } response.isValid = required && min && max && email; - +console.log(response.isValid); if ( !response.isValid ) { response.message = _fn.validate.getMessage( $el, { required: required, @@ -78,7 +79,7 @@ var edx = edx || {}; }, isBlank: function( $el ) { - return ( $el.attr('type') === 'checkbox' ) ? $el.prop('checked') : !$el.val(); + return ( $el.attr('type') === 'checkbox' ) ? !$el.prop('checked') : !$el.val(); }, email: { @@ -105,22 +106,33 @@ var edx = edx || {}; var txt = [], tpl, name, - obj; + obj, + customMsg; _.each( tests, function( value, key ) { if ( !value ) { name = $el.attr('name'); + customMsg = $el.data('errormsg-' + key) || false; - tpl = _fn.validate.msg[key]; + // If the field has a custom error msg attached use it + if ( customMsg ) { + tpl = _fn.validate.msg.custom; - obj = { - field: _fn.validate.str.capitalizeFirstLetter( name ) - }; + obj = { + content: customMsg + }; + } else { + tpl = _fn.validate.msg[key]; - if ( key === 'min' ) { - obj.count = $el.attr('minlength'); - } else if ( key === 'max' ) { - obj.count = $el.attr('maxlength'); + obj = { + field: _fn.validate.str.capitalizeFirstLetter( name ) + }; + + if ( key === 'min' ) { + obj.count = $el.attr('minlength'); + } else if ( key === 'max' ) { + obj.count = $el.attr('maxlength'); + } } txt.push( _.template( tpl, obj ) ); diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss index cda41059fa..0abce46cca 100644 --- a/lms/static/sass/views/_login-register.scss +++ b/lms/static/sass/views/_login-register.scss @@ -119,6 +119,8 @@ } .form-field { + @include clearfix; + clear: both; width: 100%; margin: 0 0 $baseline 0; @@ -277,6 +279,12 @@ @include media( $tablet ) { $grid-columns: 8; + %inline-form-field-tablet { + clear: none; + display: inline-block; + float: left; + } + .headline, .tagline, .form-type { @@ -287,11 +295,30 @@ .form-toggle { margin-right: 5px; } + + .form-field { + &.select-gender { + @extend %inline-form-field-tablet; + width: calc( 50% - 10px ); + margin-right: 20px; + } + + &.select-year_of_birth { + @extend %inline-form-field-tablet; + width: calc( 50% - 10px ); + } + } } @include media( $desktop ) { $grid-columns: 12; + %inline-form-field-desktop { + clear: none; + display: inline-block; + float: left; + } + .headline, .tagline, .form-type { @@ -302,5 +329,24 @@ .form-toggle { margin-right: 10px; } + + .form-field { + &.select-level_of_education { + @extend %inline-form-field-desktop; + width: 290px; + margin-right: 20px; + } + + &.select-gender { + @extend %inline-form-field-desktop; + width: 60px; + margin-right: 20px; + } + + &.select-year_of_birth { + @extend %inline-form-field-desktop; + width: 100px; + } + } } } diff --git a/lms/templates/student_account/form_field.underscore b/lms/templates/student_account/form_field.underscore index e6db67513d..b994e527b2 100644 --- a/lms/templates/student_account/form_field.underscore +++ b/lms/templates/student_account/form_field.underscore @@ -1,4 +1,4 @@ -

    +

    <% if ( type !== 'checkbox' ) { %>