Merge pull request #5713 from edx/alasdair/logistration-validation

ECOM-466 cleaned up form submission validation

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>