Skip to content

E
edx-platform
Commit c3083069 by AlasdairSwan
Options

ECOM-466 cleaned up form submission validation

parent b14a1291
Showing with 53 additions and 61 deletions
common/static/js/spec_helpers/edx.utils.validate.js
......@@ -10,29 +10,40 @@ var edx = edx || {};
validate: {
msg: {
email: '<p>A properly formatted e-mail is required</p>',
min: '<p><%= field %> must be a minimum of <%= length %> characters long',
max: '<p><%= field %> must be a maximum of <%= length %> characters long',
password: '<p>A valid password is required</p>',
required: '<p><%= field %> field is required</p>',
terms: '<p>To enroll you must agree to the <a href="#">Terms of Service and Honor Code</a></p>'
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>'
},
field: function( el ) {
var $el = $(el),
required = _fn.validate.required( $el ),
// length = _fn.validate.charLength( $el ),
min = _fn.validate.str.minlength( $el ),
max = _fn.validate.str.maxlength( $el ),
email = _fn.validate.email.valid( $el ),
response = {
isValid: required && min && max && email
};
required = true,
min = true,
max = true,
email = true,
response = {},
isBlank = _fn.validate.isBlank( $el );
if ( _fn.validate.isRequired( $el ) ) {
if ( isBlank ) {
required = false;
} else {
min = _fn.validate.str.minlength( $el );
max = _fn.validate.str.maxlength( $el );
email = _fn.validate.email.valid( $el );
}
} else if ( !isBlank ) {
email = _fn.validate.email.valid( $el );
}
response.isValid = required && min && max && email;
if ( !response.isValid ) {
response.message = _fn.validate.getMessage( $el, {
required: required,
// length: length,
min: min,
max: max,
email: email
......@@ -42,28 +53,6 @@ var edx = edx || {};
return response;
},
charLength: function( $el ) {
var type = $el.attr("type");
if (type !== "text" && type !== "textarea" && type !== "password") {
return true;
}
// Cannot assume there will be both min and max
var min = $el.attr('minlength') || 0,
max = $el.attr('maxlength') || false,
chars = $el.val().length,
within = false;
// if max && min && within the range
if ( min <= chars && ( max && chars <= max ) ) {
within = true;
} else if ( min <= chars && !max ) {
within = true;
}
return within;
},
str: {
minlength: function( $el ) {
var min = $el.attr('minlength') || 0;
......@@ -84,12 +73,12 @@ var edx = edx || {};
}
},
required: function( $el ) {
if ( $el.attr('type') === 'checkbox' ) {
return $el.attr('required') ? $el.prop('checked') : true;
} else {
return $el.attr('required') ? $el.val() : true;
}
isRequired: function( $el ) {
return $el.attr('required');
},
isBlank: function( $el ) {
return ( $el.attr('type') === 'checkbox' ) ? $el.prop('checked') : !$el.val();
},
email: {
......@@ -104,7 +93,7 @@ var edx = edx || {};
),
valid: function( $el ) {
return $el.data('email') ? _fn.validate.email.format( $el.val() ) : true;
return $el.attr('type') === 'email' ? _fn.validate.email.format( $el.val() ) : true;
},
format: function( str ) {
......@@ -115,7 +104,8 @@ var edx = edx || {};
getMessage: function( $el, tests ) {
var txt = [],
tpl,
name;
name,
obj;
_.each( tests, function( value, key ) {
if ( !value ) {
......@@ -123,9 +113,17 @@ var edx = edx || {};
tpl = _fn.validate.msg[key];
txt.push( _.template( tpl, {
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/js/student_account/views/PasswordResetView.js
......@@ -15,6 +15,8 @@ var edx = edx || {};
'click .js-reset': 'submitForm'
},
formType: 'password-reset',
requiredStr: '',
postRender: function() {
......
lms/static/js/student_account/views/RegisterView.js
......@@ -16,6 +16,8 @@ var edx = edx || {};
'click .login-provider': 'thirdPartyAuth'
},
formType: 'register',
initialize: function( data ) {
this.tpl = $(this.tpl).html();
this.fieldTpl = $(this.fieldTpl).html();
......
lms/static/sass/multicourse/_account.scss
......@@ -585,7 +585,7 @@
list-style: none;
li {
margin: 0 0 ($baseline/4) 0;
margin: 0; /*0 0 ($baseline/4) 0;*/
}
}
}
......@@ -598,10 +598,6 @@
.message-title {
color: shade($red, 10%) !important;
}
.message-copy {
}
}
// misc
......
lms/templates/student_account/login.underscore
<form id="login">
<div class="status submission-error hidden" aria-hidden="true">
<h4 class="message-title">We couldn't log you in.</h4>
<div class="message-copy">
<p>Email or password is incorrent. <a href="#">Forgot password?</a></p>
</div>
<ul class="message-copy"></ul>
</div>
<div class="already-authenticated-msg hidden">
<% if (currentProvider) { %>
......
lms/templates/student_account/password_reset.underscore
......@@ -8,9 +8,7 @@
<form id="password-reset-form">
<div class="status submission-error hidden" aria-hidden="true">
<h4 class="message-title">An error occurred.</h4>
<div class="message-copy">
<p>Please provide a valid email.</p>
</div>
<ul class="message-copy"></ul>
</div>
<%= fields %>
......
lms/templates/student_account/register.underscore
......@@ -14,9 +14,7 @@
<form id="register" autocomplete="off">
<div class="status submission-error hidden" aria-hidden="true">
<h4 class="message-title">An error occurred in your registration.</h4>
<div class="message-copy">
<p>Please provide a valid email.</p>
</div>
<ul class="message-copy"></ul>
</div>
<%= fields %>
<button class="action action-primary action-update js-register">Create My edX Account</button>
......
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