changed how fields that failed validation are highlighted

mojolicious · Sep 28, 2013 · a253f44 · jhthorsen · Sep 28, 2013 · a253f44
1 parent f4fee84
commit a253f44
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 39 deletions.
diff --git a/lib/Mojolicious.pm b/lib/Mojolicious.pm
@@ -806,6 +806,8 @@ Ilya Chesnokov
 
 James Duncan
 
+Jan Henning Thorsen
+
 Jan Jona Javorsek
 
 Jan Schmidt

diff --git a/lib/Mojolicious/Guides/Rendering.pod b/lib/Mojolicious/Guides/Rendering.pod
@@ -631,7 +631,7 @@ you can perform checks on their values.
     return $self->render unless $validation->has_data;
 
     # Validate parameters
-    $validation->required('user')->regex(qr/^[e-t]$/);
+    $validation->required('user')->regex(qr/^[e-t]+$/);
     $validation->optional('pass')->size(7, 500);
     $validation->optional('pass_again')->equal_to('pass');
 
@@ -647,8 +647,7 @@ you can perform checks on their values.
   <html>
     <head>
       %= stylesheet begin
-        .fields_with_errors { display: inline }
-        .fields_with_errors input { background-color: #fd9e7e }
+        input.field-with-error { background-color: #fd9e7e }
       % end
     </head>
     <body>
@@ -670,12 +669,10 @@ you can perform checks on their values.
 
 Form elements generated with tag helpers from
 L<Mojolicious::Plugin::TagHelpers> will automatically remember their previous
-values and wrap fields that failed validation with C<div> blocks, to make
-styling with CSS easier.
+values and add the class C<field-with-error> for fields that failed validation
+to make styling with CSS easier.
 
-  <div class="fields_with_errors">
-    <input type="text" name="user" value="sri" />
-  </div>
+  <input class="field-with-error" type="text" name="user" value="sri" />
 
 Every check is performed right away, so you can use the results immediately to
 build more advanced validation logic with methods like
@@ -754,8 +751,7 @@ L<Mojolicious::Validator::Validation/"add_error">.
   <html>
     <head>
       %= stylesheet begin
-        .fields_with_errors { display: inline }
-        .fields_with_errors input { background-color: #fd9e7e }
+        input.field-with-error { background-color: #fd9e7e }
       % end
     </head>
     <body>

diff --git a/lib/Mojolicious/Plugin/TagHelpers.pm b/lib/Mojolicious/Plugin/TagHelpers.pm
@@ -25,7 +25,8 @@ sub register {
   $app->helper(javascript => \&_javascript);
   $app->helper(link_to    => \&_link_to);
 
-  $app->helper(password_field => \&_password_field);
+  $app->helper(password_field =>
+      sub { _validation(shift, shift, 'input', @_, type => 'password') });
   $app->helper(radio_button =>
       sub { _input(shift, shift, value => shift, @_, type => 'radio') });
 
@@ -83,7 +84,7 @@ sub _input {
     else { $attrs{value} = $values[0] }
   }
 
-  return _wrap($self, $name, _tag('input', name => $name, %attrs));
+  return _validation($self, $name, 'input', %attrs);
 }
 
 sub _javascript {
@@ -118,12 +119,6 @@ sub _link_to {
   return _tag('a', href => $self->url_for(@url), @_);
 }
 
-sub _password_field {
-  my ($self, $name) = (shift, shift);
-  return _wrap($self, $name,
-    _tag('input', name => $name, @_, type => 'password'));
-}
-
 sub _select_field {
   my ($self, $name, $options, %attrs) = (shift, shift, shift, @_);
 
@@ -164,7 +159,7 @@ sub _select_field {
     return $parts;
   };
 
-  return _wrap($self, $name, _tag('select', name => $name, %attrs, $optgroup));
+  return _validation($self, $name, 'select', %attrs, $optgroup);
 }
 
 sub _stylesheet {
@@ -229,13 +224,15 @@ sub _text_area {
     $cb = sub { xml_escape $content }
   }
 
-  return _wrap($self, $name, _tag('textarea', name => $name, @_, $cb));
+  return _validation($self, $name, 'textarea', @_, $cb);
 }
 
-sub _wrap {
-  my ($self, $name, $html) = @_;
-  return $html unless $self->validation->has_error($name);
-  return _tag('div', class => 'fields_with_errors', sub {$html});
+sub _validation {
+  my ($self, $name, $tag) = (shift, shift, shift);
+  my ($content, %attrs) = (@_ % 2 ? pop : undef, @_);
+  $attrs{class} .= $attrs{class} ? ' field-with-error' : 'field-with-error'
+    if $self->validation->has_error($name);
+  return _tag($tag, name => $name, %attrs, $content ? $content : ());
 }
 
 1;

diff --git a/t/mojolicious/validation_lite_app.t b/t/mojolicious/validation_lite_app.t
@@ -139,27 +139,21 @@ ok $validation->has_error('bar'), 'has error';
 
 # No validation
 $t->get_ok('/')->status_is(200)->element_exists_not('div:root')
-  ->element_exists('form > input[type="text"]')
-  ->element_exists('form > textarea')->element_exists('form > select')
-  ->element_exists('form > input[type="password"]');
+  ->element_exists('input[type="text"]')->element_exists('textarea')
+  ->element_exists('select')->element_exists('input[type="password"]');
 
 # Successful validation
 $t->get_ok('/?foo=ok')->status_is(200)->element_exists_not('div:root')
-  ->element_exists('form > input[type="password"]')
-  ->element_exists('form > textarea')->element_exists('form > select')
-  ->element_exists('form > input[type="password"]');
+  ->element_exists('input[type="password"]')->element_exists('textarea')
+  ->element_exists('select')->element_exists('input[type="password"]');
 
 # Failed validation
 $t->get_ok('/?foo=too_long&bar=too_long_too&baz=way_too_long&yada=whatever')
   ->status_is(200)->text_is('div:root' => 'My error.')
-  ->element_exists_not('form > input[type="text"]')
-  ->element_exists('form > div.fields_with_errors > input[type="text"]')
-  ->element_exists_not('form > textarea')
-  ->element_exists('form > div.fields_with_errors > textarea')
-  ->element_exists_not('form > select')
-  ->element_exists('form > div.fields_with_errors > select')
-  ->element_exists_not('form > input[type="password"]')
-  ->element_exists('form > div.fields_with_errors > input[type="password"]');
+  ->element_exists('input[type="text"][class="custom field-with-error"]')
+  ->element_exists('textarea[class="field-with-error"]')
+  ->element_exists('select[class="field-with-error"]')
+  ->element_exists('input[type="password"][class="field-with-error"]');
 
 done_testing();
 
@@ -170,7 +164,7 @@ __DATA__
   <div><%= validation->errors('foo') %></div>
 % }
 %= form_for index => begin
-  %= text_field 'foo'
+  %= text_field 'foo', class => 'custom'
   %= text_area 'bar'
   %= select_field baz => [qw(yada yada)]
   %= password_field 'yada'