create a different valid class if we have not submitted the form to stop jumping about

2 files changed, 14 insertions, 1 deletions

diff --git a/web/css/core.scss b/web/css/core.scss
index 59abf3e85..78329534b 100644
--- a/web/css/core.scss
+++ b/web/css/core.scss
@@ -61,6 +61,15 @@ $map_width: 500px;
         background-color: white;
     }
 
+    div.label-valid-hidden {
+        display: none;
+        visibility: hidden;
+        height: 0px;
+        width: 0px;
+        margin: 0px;
+        padding: 0px;
+    }
+
     div.form-field {
         clear: both;
     }
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index 2c404af93..1dfdfd2bb 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -61,13 +61,15 @@ $(function(){
         var validNamePat = /\ba\s*n+on+((y|o)mo?u?s)?(ly)?\b/i;
         return this.optional(element) || value.length > 5 && value.match( /\S/ ) && !value.match( validNamePat ) }, validation_strings['category'] );
 
+    var form_submitted = 0;
+
     $("form.validate").validate({
         messages: validation_strings,
         onkeyup: false,
         errorElement: 'div',
         errorClass: 'form-error',
         // we do this to stop things jumping around on blur
-        success: function (err) { err.addClass('label-valid').html( ' ' ) },
+        success: function (err) { if ( form_submitted ) { err.addClass('label-valid').html( ' ' ); } else { err.addClass('label-valid-hidden'); } },
         errorPlacement: function( error, element ) {
             element.parent('div').before( error );
         },
@@ -80,6 +82,8 @@ $(function(){
         },
     });
 
+    $('input[type=submit]').click( function(e) { form_submitted = 1; } );
+
     /* set correct required status depending on what we submit */
     $('#submit_sign_in').click( function(e) {
         $('#form_category').addClass('required validCategory').removeClass('valid');