Merge pull request bootstrap-ruby#150 from krsyoung/required_label_asterix

Required label asterix

Author: potenza

CHANGELOG.md

@@ -38,6 +38,9 @@ Features:
   - Added the ability to pass any attributes to wrapper (#136, @atipugin)
   - Split monolithic test file into several smaller files (#141, @spacewander)
   - Added role="form" attribute to forms (#142, @spacewander)
+  - Allow users to display validation errors in labels (#144, @timcheadle)
+  - Use #underscore, not #downcase for help text scope (#140, @atipugin)
+  - Added a `required` CSS class for labels with required attributes (#150, @krsyoung)
 
 ## 2.1.1 (2014-04-20)
 

README.md

@@ -133,6 +133,23 @@ class, which keeps your labels accessible to those using screen readers.
 ```erb
 <%= f.text_area :comment, hide_label: :true, placeholder: "Leave a comment..." %>
 ```
+#### Required Fields
+
+A label that is associated with a required field is automatically annotated with
+a `required` CSS class. You are free to add any appropriate CSS to style 
+required fields as desired.  One example would be to automatically add an
+asterisk to the end of the label:
+
+```css
+label.required:after {
+  content:" *";
+}
+```
+
+The label `required` class is determined based on the definition of a presence
+validator with the associated model attribute. Presently this is one of:
+ActiveRecord::Validations::PresenceValidator or
+ActiveModel::Validations::PresenceValidator.
 
 ### Help Text
 
@@ -152,7 +169,7 @@ en:
         password: "A good password should be at least six characters long"
 ```
 
-If your model name has multiple words (like `SuperUser`), the key on the 
+If your model name has multiple words (like `SuperUser`), the key on the
 translation file should be underscored (`super_user`).
 
 You can override help translations for a particular field by passing the `help`

lib/bootstrap_form/form_builder.rb

@@ -253,6 +253,18 @@ def has_error?(name)
       object.respond_to?(:errors) && !(name.nil? || object.errors[name].empty?)
     end
 
+    def required_attribute?(obj, attribute)
+
+      return false unless obj and attribute
+
+      target = (obj.class == Class) ? obj : obj.class
+      target_validators = target.validators_on(attribute).map(&:class)
+      target_validators.include?(
+        ActiveRecord::Validations::PresenceValidator) || 
+      target_validators.include?(
+        ActiveModel::Validations::PresenceValidator)
+    end
+
     def form_group_builder(method, options, html_options = nil)
       options.symbolize_keys!
       html_options.symbolize_keys! if html_options
@@ -309,6 +321,8 @@ def generate_label(id, name, options, custom_label_col, group_layout)
       options[:for] = id if acts_like_form_tag
       classes = [options[:class], label_class]
       classes << (custom_label_col || label_col) if get_group_layout(group_layout) == :horizontal
+      classes << "required" if required_attribute?(object, name)
+
       options[:class] = classes.compact.join(" ")
 
       if label_errors && has_error?(name)
@@ -318,6 +332,7 @@ def generate_label(id, name, options, custom_label_col, group_layout)
       else
         label(name, options[:text], options.except(:text))
       end
+
     end
 
     def generate_help(name, help_text)

test/bootstrap_fields_test.rb

@@ -79,7 +79,7 @@ def setup
   end
 
   test "text fields are wrapped correctly" do
-    expected = %{<div class="form-group"><label class="control-label" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /></div>}
+    expected = %{<div class="form-group"><label class="control-label required" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /></div>}
     assert_equal expected, @builder.text_field(:email)
   end
 

test/bootstrap_form_group_test.rb

@@ -8,12 +8,12 @@ def setup
   end
 
   test "changing the label text" do
-    expected = %{<div class="form-group"><label class="control-label" for="user_email">Email Address</label><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /></div>}
+    expected = %{<div class="form-group"><label class="control-label required" for="user_email">Email Address</label><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /></div>}
     assert_equal expected, @builder.text_field(:email, label: 'Email Address')
   end
 
   test "hiding a label" do
-    expected = %{<div class="form-group"><label class="sr-only control-label" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /></div>}
+    expected = %{<div class="form-group"><label class="sr-only control-label required" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /></div>}
     assert_equal expected, @builder.text_field(:email, hide_label: true)
   end
 
@@ -23,17 +23,17 @@ def setup
   end
 
   test "adding prepend text" do
-    expected = %{<div class="form-group"><label class="control-label" for="user_email">Email</label><div class="input-group"><span class="input-group-addon">@</span><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /></div></div>}
+    expected = %{<div class="form-group"><label class="control-label required" for="user_email">Email</label><div class="input-group"><span class="input-group-addon">@</span><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /></div></div>}
     assert_equal expected, @builder.text_field(:email, prepend: '@')
   end
 
   test "adding append text" do
-    expected = %{<div class="form-group"><label class="control-label" for="user_email">Email</label><div class="input-group"><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /><span class="input-group-addon">.00</span></div></div>}
+    expected = %{<div class="form-group"><label class="control-label required" for="user_email">Email</label><div class="input-group"><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /><span class="input-group-addon">.00</span></div></div>}
     assert_equal expected, @builder.text_field(:email, append: '.00')
   end
 
   test "append and prepend button" do
-    prefix = %{<div class="form-group"><label class="control-label" for="user_email">Email</label><div class="input-group">}
+    prefix = %{<div class="form-group"><label class="control-label required" for="user_email">Email</label><div class="input-group">}
     field = %{<input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" />}
     button = %{<span class="input-group-btn"><a class="btn btn-default" href="#">Click</a></span>}
     suffix = %{</div></div>}
@@ -47,17 +47,17 @@ def setup
   end
 
   test "adding both prepend and append text" do
-    expected = %{<div class="form-group"><label class="control-label" for="user_email">Email</label><div class="input-group"><span class="input-group-addon">$</span><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /><span class="input-group-addon">.00</span></div></div>}
+    expected = %{<div class="form-group"><label class="control-label required" for="user_email">Email</label><div class="input-group"><span class="input-group-addon">$</span><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /><span class="input-group-addon">.00</span></div></div>}
     assert_equal expected, @builder.text_field(:email, prepend: '$', append: '.00')
   end
 
   test "help messages for default forms" do
-    expected = %{<div class="form-group"><label class="control-label" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /><span class="help-block">This is required</span></div>}
+    expected = %{<div class="form-group"><label class="control-label required" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /><span class="help-block">This is required</span></div>}
     assert_equal expected, @builder.text_field(:email, help: 'This is required')
   end
 
   test "help messages for horizontal forms" do
-    expected = %{<div class="form-group"><label class="control-label col-sm-2" for="user_email">Email</label><div class="col-sm-10"><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /><span class="help-block">This is required</span></div></div>}
+    expected = %{<div class="form-group"><label class="control-label col-sm-2 required" for="user_email">Email</label><div class="col-sm-10"><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /><span class="help-block">This is required</span></div></div>}
     assert_equal expected, @horizontal_builder.text_field(:email, help: "This is required")
   end
 
@@ -112,7 +112,7 @@ def setup
       %{<p class="form-control-static">Bar</p>}.html_safe
     end
 
-    expected = %{<div class="form-group"><label class="control-label col-sm-2" for="user_email">Custom Control</label><div class="col-sm-10"><p class="form-control-static">Bar</p></div></div>}
+    expected = %{<div class="form-group"><label class="control-label col-sm-2 required" for="user_email">Custom Control</label><div class="col-sm-10"><p class="form-control-static">Bar</p></div></div>}
     assert_equal expected, output
   end
 
@@ -164,7 +164,7 @@ def setup
     @user.email = nil
     @user.valid?
 
-    expected = %{<div class="form-group none-margin has-error"><div class="field_with_errors"><label class="control-label" for="user_email">Email</label></div><div class="field_with_errors"><input class="form-control" id="user_email" name="user[email]" type="email" /></div><span class="help-block">can&#39;t be blank, is too short (minimum is 5 characters)</span></div>}
+    expected = %{<div class="form-group none-margin has-error"><div class="field_with_errors"><label class="control-label required" for="user_email">Email</label></div><div class="field_with_errors"><input class="form-control" id="user_email" name="user[email]" type="email" /></div><span class="help-block">can&#39;t be blank, is too short (minimum is 5 characters)</span></div>}
     assert_equal expected, @builder.email_field(:email, wrapper_class: 'none-margin')
   end
 
@@ -176,7 +176,7 @@ def setup
       f.text_field(:email, help: 'This is required', wrapper_class: 'none-margin')
     end
 
-    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="form-group none-margin has-error"><label class="control-label" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" /><span class="help-block">can&#39;t be blank, is too short (minimum is 5 characters)</span></div></form>}
+    expected = %{<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="form-group none-margin has-error"><label class="control-label required" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="text" /><span class="help-block">can&#39;t be blank, is too short (minimum is 5 characters)</span></div></form>}
     assert_equal expected, output
   end
 
@@ -211,7 +211,7 @@ def setup
 
     output = output + @horizontal_builder.text_field(:email)
 
-    expected = %{<div class="form-group"><div class="col-sm-10 col-sm-offset-2">Hallo</div></div><div class="form-group"><label class="control-label col-sm-2" for="user_email">Email</label><div class="col-sm-10"><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /></div></div>}
+    expected = %{<div class="form-group"><div class="col-sm-10 col-sm-offset-2">Hallo</div></div><div class="form-group"><label class="control-label col-sm-2 required" for="user_email">Email</label><div class="col-sm-10"><input class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /></div></div>}
     assert_equal expected, output
   end
 
@@ -221,7 +221,7 @@ def setup
   end
 
   test "passing options to a form control get passed through" do
-    expected = %{<div class="form-group"><label class="control-label" for="user_email">Email</label><input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /></div>}
+    expected = %{<div class="form-group"><label class="control-label required" for="user_email">Email</label><input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" type="text" value="steve@example.com" /></div>}
     assert_equal expected, @builder.text_field(:email, autofocus: true)
   end
 
@@ -235,7 +235,7 @@ def setup
   end
 
   test "custom form group layout option" do
-    expected = %{<form accept-charset="UTF-8" action="/users" class="form-horizontal" id="new_user" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="form-group"><label class="control-label" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com" /></div></form>}
+    expected = %{<form accept-charset="UTF-8" action="/users" class="form-horizontal" id="new_user" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div><div class="form-group"><label class="control-label required" for="user_email">Email</label><input class="form-control" id="user_email" name="user[email]" type="email" value="steve@example.com" /></div></form>}
     assert_equal expected, bootstrap_form_for(@user, layout: :horizontal) { |f| f.email_field :email, layout: :inline }
   end
 end