Skip to content

E
edx-platform
Commit a86e9e68 by AlasdairSwan
Options

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

parent 60f02feb
Showing with 95 additions and 20 deletions
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,22 +106,33 @@ var edx = edx || {};
var txt = [],
tpl,
name,
obj;
obj,
customMsg;
_.each( tests, function( value, key ) {
if ( !value ) {
name = $el.attr('name');
tpl = _fn.validate.msg[key];
obj = {
field: _fn.validate.str.capitalizeFirstLetter( name )
};
if ( key === 'min' ) {
obj.count = $el.attr('minlength');
} else if ( key === 'max' ) {
obj.count = $el.attr('maxlength');
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 = {
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 ) );
......
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 %>"
/>
<% } %>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment