ECOM-466 Added support for custom error messages. Styled select widths

common/static/js/spec_helpers/edx.utils.validate.js

@@ -13,9 +13,9 @@ var edx = edx || {};
                     email: '<li>A properly formatted e-mail is required</li>',
                     min: '<li><%= field %> must be a minimum of <%= count %> characters long</li>',
                     max: '<li><%= field %> must be a maximum of <%= count %> characters long</li>',
-                    password: '<li>A valid password is required</li>',
                     required: '<li><%= field %> field is required</li>',
-                    terms: '<li>To enroll you must agree to the <a href="#">Terms of Service and Honor Code</a></li>'
+                    terms: '<li>To enroll you must agree to the <a href="#">Terms of Service and Honor Code</a></li>',
+                    custom: '<li><%= content %></li>'
                 },
 
                 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,12 +106,22 @@ 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;
+
+                            // If the field has a custom error msg attached use it
+                            if ( customMsg ) {
+                                tpl = _fn.validate.msg.custom;
 
+                                obj = {
+                                    content: customMsg
+                                };
+                            } else {
                                 tpl = _fn.validate.msg[key];
 
                                 obj = {
@@ -122,6 +133,7 @@ var edx = edx || {};
                                 } else if ( key === 'max' ) {
                                     obj.count = $el.attr('maxlength');
                                 }
+                            }
 
                             txt.push( _.template( tpl, obj ) );
                         }

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;
+            }
+        }
     }
 }

lms/templates/student_account/form_field.underscore

-<p class="form-field">
+<p class="form-field <%=type%>-<%= name %>">
     <% if ( type !== 'checkbox' ) { %>
         <label for="<%= form %>-<%= name %>">
             <%= label %>
@@ -11,22 +11,39 @@
     <% } %>
 
     <% if ( type === 'select' ) { %>
-        <select id="<%= form %>-<%= name %>" name="<%= name %>" class="input-inline" aria-describedby="<%= form %>-<%= name %>-desc">
+        <select id="<%= form %>-<%= name %>"
+            name="<%= name %>"
+            class="input-inline"
+            aria-describedby="<%= form %>-<%= name %>-desc">
         <% _.each(options, function(el) { %>
             <option value="<%= el.value%>"><%= el.name %></option>
         <% }); %>
         </select>
     <% } else if ( type === 'textarea' ) { %>
-        <textarea id="<%= form %>-<%= name %>" type="<%= type %>" name="<%= name %>" class="input-block" aria-describedby="<%= form %>-<%= name %>-desc"
+        <textarea id="<%= form %>-<%= name %>"
+            type="<%= type %>"
+            name="<%= name %>"
+            class="input-block"
+            aria-describedby="<%= form %>-<%= name %>-desc"
             <% if ( restrictions.min_length ) { %> minlength="<%= restrictions.min_length %>"<% } %>
             <% if ( restrictions.max_length ) { %> maxlength="<%= restrictions.max_length %>"<% } %>
+            <% if ( typeof errorMessages !== 'undefined' ) { _.each(errorMessages, function(msg, type) {%>
+                data-errormsg-<%= type %>="<%= msg %>"
+            <% }); } %>
             <% if ( required ) { %> required<% } %> >
         </textarea>
     <% } else { %>
-        <input id="<%= form %>-<%= name %>" type="<%= type %>" name="<%= name %>" class="input-block <% if ( type === 'checkbox' ) { %>checkbox<% } %>" aria-describedby="<%= form %>-<%= name %>-desc"
+        <input id="<%= form %>-<%= name %>"
+           type="<%= type %>"
+           name="<%= name %>"
+           class="input-block <% if ( type === 'checkbox' ) { %>checkbox<% } %>"
+           aria-describedby="<%= form %>-<%= name %>-desc"
             <% if ( restrictions.min_length ) { %> minlength="<%= restrictions.min_length %>"<% } %>
             <% if ( restrictions.max_length ) { %> maxlength="<%= restrictions.max_length %>"<% } %>
             <% if ( required ) { %> required<% } %>
+            <% if ( typeof errorMessages !== 'undefined' ) { _.each(errorMessages, function(msg, type) {%>
+                data-errormsg-<%= type %>="<%= msg %>"
+            <% }); } %>
             value="<%- defaultValue %>"
         />
     <% } %>