Merge pull request #308 from MITx/feature/halogenandtoast/form-field-errors

Add field-error class to field with issues.

common/djangoapps/student/views.py

@@ -264,14 +264,17 @@ def create_account(request, post_override=None):
     for a in ['username', 'email', 'password', 'name']:
         if a not in post_vars:
             js['value'] = "Error (401 {field}). E-mail us.".format(field=a)
+            js['field'] = a
             return HttpResponse(json.dumps(js))
 
     if post_vars.get('honor_code', 'false') != u'true':
         js['value'] = "To enroll, you must follow the honor code.".format(field=a)
+        js['field'] = 'honor_code'
         return HttpResponse(json.dumps(js))
 
     if post_vars.get('terms_of_service', 'false') != u'true':
         js['value'] = "You must accept the terms of service.".format(field=a)
+        js['field'] = 'terms_of_service'
         return HttpResponse(json.dumps(js))
 
     # Confirm appropriate fields are there.
@@ -288,18 +291,21 @@ def create_account(request, post_override=None):
                          'terms_of_service': 'Accepting Terms of Service is required.',
                          'honor_code': 'Agreeing to the Honor Code is required.'}
             js['value'] = error_str[a]
+            js['field'] = a
             return HttpResponse(json.dumps(js))
 
     try:
         validate_email(post_vars['email'])
     except ValidationError:
         js['value'] = "Valid e-mail is required.".format(field=a)
+        js['field'] = 'email'
         return HttpResponse(json.dumps(js))
 
     try:
         validate_slug(post_vars['username'])
     except ValidationError:
         js['value'] = "Username should only consist of A-Z and 0-9.".format(field=a)
+        js['field'] = 'username'
         return HttpResponse(json.dumps(js))
 
     u = User(username=post_vars['username'],
@@ -315,10 +321,12 @@ def create_account(request, post_override=None):
         # Figure out the cause of the integrity error
         if len(User.objects.filter(username=post_vars['username'])) > 0:
             js['value'] = "An account with this username already exists."
+            js['field'] = 'username'
             return HttpResponse(json.dumps(js))
 
         if len(User.objects.filter(email=post_vars['email'])) > 0:
             js['value'] = "An account with this e-mail already exists."
+            js['field'] = 'email'
             return HttpResponse(json.dumps(js))
 
         raise

lms/templates/signup_modal.html

@@ -19,19 +19,19 @@
         <div id="register_error" name="register_error"></div>
 
         <div class="input-group">
-          <label>E-mail*</label>
+          <label data-field="email">E-mail*</label>
           <input name="email" type="email" placeholder="E-mail*">
-          <label>Password*</label>
+          <label data-field="password">Password*</label>
           <input name="password" type="password" placeholder="Password*">
-          <label>Public Username*</label>
+          <label data-field="username">Public Username*</label>
           <input name="username" type="text" placeholder="Public Username*">
-          <label>Full Name</label>
+          <label data-field="name">Full Name</label>
           <input name="name" type="text" placeholder="Full Name*">
         </div>
 
         <div class="input-group">
           <section class="citizenship">
-            <label>Ed. completed</label>
+            <label data-field="level_of_education">Ed. completed</label>
             <div class="input-wrapper">
               <select name="level_of_education">
                   <option value="">--</option>
@@ -43,7 +43,7 @@
           </section>
 
           <section class="gender">
-            <label>Gender</label>
+            <label data-field="gender">Gender</label>
             <div class="input-wrapper">
               <select name="gender">
                   <option value="">--</option>
@@ -55,7 +55,7 @@
           </section>
 
           <section class="date-of-birth">
-            <label>Year of birth</label>
+            <label data-field="date-of-birth">Year of birth</label>
             <div class="input-wrapper">
               <select name="year_of_birth">
                 <option value="">--</option>
@@ -67,21 +67,21 @@
             </div>
           </section>
 
-          <label>Mailing address</label>
+          <label data-field="mailing_address">Mailing address</label>
           <textarea name="mailing_address" placeholder="Mailing address"></textarea>
-          <label>Goals in signing up for edX</label>
+          <label data-field="goals">Goals in signing up for edX</label>
           <textarea name="goals" placeholder="Goals in signing up for edX"></textarea>
 
         </div>
 
         <div class="input-group">
-          <label class="terms-of-service">
+          <label data-field="terms_of_service" class="terms-of-service">
             <input name="terms_of_service" type="checkbox" value="true">
             I agree to the
             <a href="${reverse('tos')}" target="_blank">Terms of Service</a>*
           </label>
 
-          <label class="honor-code">
+          <label data-field="honor_code" class="honor-code">
             <input name="honor_code" type="checkbox" value="true">
             I agree to the
             <a href="${reverse('honor')}" target="_blank">Honor Code</a>*
@@ -115,7 +115,9 @@
      if(json.success) {
        location.href="${reverse('dashboard')}";
      } else {
+       $(".field-error").removeClass('field-error');
        $('#register_error').html(json.value).stop().css("display", "block");
+       $("[data-field='"+json.field+"']").addClass('field-error')
      }
     });
   })(this)