Reduce complexity of error detaching

miloops · Mar 18, 2011 · 7ec3190 · 7ec3190
1 parent 70fd8cb
commit 7ec3190
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 18 deletions.
diff --git a/javascript/client-side-validations.js b/javascript/client-side-validations.js
@@ -56,14 +56,13 @@ var clientSideValidations = new function() {
 
   this.validateSelector = function(selector) {
     var selector = $(selector);
-    if (selector.attr('changed') == "true" || selector.attr('changed') == undefined) {
+
+    if (selector.attr('changed') !== "false") {
       var validSelector = true;
       var validators = new Function("return " + selector.attr('data-validators'))();
       var localValidators = [];
       var remoteValidators = [];
 
-      this.detachErrorField(selector);
-
       for (var key in validators) {
         if ($.inArray(key, this.remoteValidators)) {
           localValidators.push(key);
@@ -81,6 +80,9 @@ var clientSideValidations = new function() {
         }
       }
 
+      if (selector.attr('data-valid') === "false" && validSelector) {
+        this.detachErrorField(selector);
+      }
       selector.attr('changed', false);
       selector.attr('data-valid', validSelector);
       return validSelector;
@@ -130,20 +132,21 @@ var clientSideValidations = new function() {
   }
 
   this['applyActionView::Helpers::FormBuilderErrorField'] = function(selector, message, settings) {
-    var inputErrorField = $(settings.input_tag);
-    var labelErrorField = $(settings.label_tag);
-    var label = $('label[for="' + selector.attr('id') + '"]:not(.message)');
+    if (selector.attr('data-valid') !== "false") {
+      var inputErrorField = $(settings.input_tag);
+      var labelErrorField = $(settings.label_tag);
+      var label = $('label[for="' + selector.attr('id') + '"]:not(.message)');
 
-    // Killing the live event then re-enabling them is probably not very performant
-    $('[data-validators]').die('blur');
-    selector.before(inputErrorField);
-    inputErrorField.find('span#input_tag').replaceWith(selector);
-    inputErrorField.find('label.message').text(message);
-    inputErrorField.find('label.message').attr('for', selector.attr('id'));
-    label.replaceWith(labelErrorField);
-    labelErrorField.find('label#label_tag').replaceWith(label);
-
-    $('[data-validators]').live('blur', function() { clientSideValidations.validateSelector(this) });
+      // Killing the live event then re-enabling them is probably not very performant
+      $('[data-validators]').die('blur');
+      selector.before(inputErrorField);
+      inputErrorField.find('span#input_tag').replaceWith(selector);
+      inputErrorField.find('label.message').attr('for', selector.attr('id'));
+      label.replaceWith(labelErrorField);
+      labelErrorField.find('label#label_tag').replaceWith(label);
+      $('[data-validators]').live('blur', function() { clientSideValidations.validateSelector(this) });
+    }
+    $('label.message[for="' + selector.attr('id') + '"]').text(message);
   }
 
   this['applySimpleForm::FormBuilderErrorField'] = function(selector, message, settings) {

diff --git a/test/javascript/public/test/validateSelector.js b/test/javascript/public/test/validateSelector.js
@@ -12,7 +12,7 @@ module('Validate Selector', {
         .append($('<input />', {
           name: 'user[name]',
           id: 'user_name',
-          'data-validators': '{presence:{message: "must be present"}}',
+          'data-validators': '{presence:{message: "must be present"}, format:{message:"is invalid",with:/\\d+/}}',
           type: 'text'
         }))
         .append($('<label for="user_password">Password</label>'))
@@ -113,7 +113,7 @@ test("Don't validate when value hasn't changed", function() {
   ok(input.parent().hasClass('field_with_errors'));
   ok(label.parent().hasClass('field_with_errors'));
 
-  input.val('test');
+  input.val('123');
   input.trigger('blur');
   ok(input.parent().hasClass('field_with_errors'));
   ok(label.parent().hasClass('field_with_errors'));
@@ -123,3 +123,16 @@ test("Don't validate when value hasn't changed", function() {
   ok(!input.parent().hasClass('field_with_errors'));
   ok(!label.parent().hasClass('field_with_errors'));
 });
+
+test('Validate when error message needs to change', function() {
+  var form = $('form#new_user'), input = form.find('input#user_name');
+  var label = $('label[for="user_name"]');
+
+  input.trigger('blur');
+  equal(input.parent().find('label.message').text(), "must be present");
+  input.val('abc');
+  input.trigger('change')
+  input.trigger('blur');
+  equal(input.parent().find('label.message').text(), "is invalid");
+});
+