Highlight erroneous fields by adding a class to them
The default rails scheme for highlighting errors is to wrap the field in a div, but that changes the structure of the page and can change the meaning of CSS rules applied to the fields. As an alternative we now apply a class to the fields, and use that in the CSS to apply a highlight.
This commit is contained in:
parent
0764bb40b2
commit
933b091330
4 changed files with 23 additions and 16 deletions
|
@ -1725,12 +1725,6 @@ header .search_form {
|
||||||
|
|
||||||
/* Rules for highlighting fields with rails validation errors */
|
/* Rules for highlighting fields with rails validation errors */
|
||||||
|
|
||||||
.field_with_errors {
|
|
||||||
padding: 2px;
|
|
||||||
background-color: #ff7070;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formError {
|
.formError {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
|
@ -1843,6 +1837,10 @@ textarea {
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
|
||||||
|
&.field_with_errors {
|
||||||
|
border: 2px solid #ff7070;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
|
|
9
config/initializers/field_error.rb
Normal file
9
config/initializers/field_error.rb
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
|
||||||
|
class_attr_index = html_tag.index 'class="'
|
||||||
|
|
||||||
|
if class_attr_index
|
||||||
|
html_tag.insert class_attr_index+7, 'field_with_errors '
|
||||||
|
else
|
||||||
|
html_tag.insert html_tag.index(/\/?>/), ' class="field_with_errors"'
|
||||||
|
end
|
||||||
|
end
|
|
@ -252,7 +252,7 @@ class UserControllerTest < ActionController::TestCase
|
||||||
|
|
||||||
assert_response :success
|
assert_response :success
|
||||||
assert_template 'new'
|
assert_template 'new'
|
||||||
assert_select "form > fieldset > div.form-row > div.field_with_errors > input#user_email"
|
assert_select "form > fieldset > div.form-row > input.field_with_errors#user_email"
|
||||||
end
|
end
|
||||||
|
|
||||||
def test_user_create_submit_duplicate_email_uppercase
|
def test_user_create_submit_duplicate_email_uppercase
|
||||||
|
@ -267,7 +267,7 @@ class UserControllerTest < ActionController::TestCase
|
||||||
|
|
||||||
assert_response :success
|
assert_response :success
|
||||||
assert_template 'new'
|
assert_template 'new'
|
||||||
assert_select "form > fieldset > div.form-row > div.field_with_errors > input#user_email"
|
assert_select "form > fieldset > div.form-row > input.field_with_errors#user_email"
|
||||||
end
|
end
|
||||||
|
|
||||||
def test_user_create_submit_duplicate_name
|
def test_user_create_submit_duplicate_name
|
||||||
|
@ -282,7 +282,7 @@ class UserControllerTest < ActionController::TestCase
|
||||||
|
|
||||||
assert_response :success
|
assert_response :success
|
||||||
assert_template 'new'
|
assert_template 'new'
|
||||||
assert_select "form > fieldset > div.form-row > div.field_with_errors > input#user_display_name"
|
assert_select "form > fieldset > div.form-row > input.field_with_errors#user_display_name"
|
||||||
end
|
end
|
||||||
|
|
||||||
def test_user_create_submit_duplicate_name_uppercase
|
def test_user_create_submit_duplicate_name_uppercase
|
||||||
|
@ -297,7 +297,7 @@ class UserControllerTest < ActionController::TestCase
|
||||||
|
|
||||||
assert_response :success
|
assert_response :success
|
||||||
assert_template 'new'
|
assert_template 'new'
|
||||||
assert_select "form > fieldset > div.form-row > div.field_with_errors > input#user_display_name"
|
assert_select "form > fieldset > div.form-row > input.field_with_errors#user_display_name"
|
||||||
end
|
end
|
||||||
|
|
||||||
def test_user_save_referer_params
|
def test_user_save_referer_params
|
||||||
|
@ -478,7 +478,7 @@ class UserControllerTest < ActionController::TestCase
|
||||||
assert_template :account
|
assert_template :account
|
||||||
assert_select ".notice", false
|
assert_select ".notice", false
|
||||||
assert_select "div#errorExplanation"
|
assert_select "div#errorExplanation"
|
||||||
assert_select "form#accountForm > fieldset > div.form-row > div.field_with_errors > input#user_display_name"
|
assert_select "form#accountForm > fieldset > div.form-row > input.field_with_errors#user_display_name"
|
||||||
|
|
||||||
# Changing name to one that exists should fail, regardless of case
|
# Changing name to one that exists should fail, regardless of case
|
||||||
new_attributes = user.attributes.dup.merge(:display_name => users(:public_user).display_name.upcase)
|
new_attributes = user.attributes.dup.merge(:display_name => users(:public_user).display_name.upcase)
|
||||||
|
@ -487,7 +487,7 @@ class UserControllerTest < ActionController::TestCase
|
||||||
assert_template :account
|
assert_template :account
|
||||||
assert_select ".notice", false
|
assert_select ".notice", false
|
||||||
assert_select "div#errorExplanation"
|
assert_select "div#errorExplanation"
|
||||||
assert_select "form#accountForm > fieldset > div.form-row > div.field_with_errors > input#user_display_name"
|
assert_select "form#accountForm > fieldset > div.form-row > input.field_with_errors#user_display_name"
|
||||||
|
|
||||||
# Changing name to one that doesn't exist should work
|
# Changing name to one that doesn't exist should work
|
||||||
new_attributes = user.attributes.dup.merge(:display_name => "new tester")
|
new_attributes = user.attributes.dup.merge(:display_name => "new tester")
|
||||||
|
@ -508,7 +508,7 @@ class UserControllerTest < ActionController::TestCase
|
||||||
assert_template :account
|
assert_template :account
|
||||||
assert_select ".notice", false
|
assert_select ".notice", false
|
||||||
assert_select "div#errorExplanation"
|
assert_select "div#errorExplanation"
|
||||||
assert_select "form#accountForm > fieldset > div.form-row > div.field_with_errors > input#user_new_email"
|
assert_select "form#accountForm > fieldset > div.form-row > input.field_with_errors#user_new_email"
|
||||||
|
|
||||||
# Changing email to one that exists should fail, regardless of case
|
# Changing email to one that exists should fail, regardless of case
|
||||||
user.new_email = users(:public_user).email.upcase
|
user.new_email = users(:public_user).email.upcase
|
||||||
|
@ -517,7 +517,7 @@ class UserControllerTest < ActionController::TestCase
|
||||||
assert_template :account
|
assert_template :account
|
||||||
assert_select ".notice", false
|
assert_select ".notice", false
|
||||||
assert_select "div#errorExplanation"
|
assert_select "div#errorExplanation"
|
||||||
assert_select "form#accountForm > fieldset > div.form-row > div.field_with_errors > input#user_new_email"
|
assert_select "form#accountForm > fieldset > div.form-row > input.field_with_errors#user_new_email"
|
||||||
|
|
||||||
# Changing email to one that doesn't exist should work
|
# Changing email to one that doesn't exist should work
|
||||||
user.new_email = "new_tester@example.com"
|
user.new_email = "new_tester@example.com"
|
||||||
|
|
|
@ -29,7 +29,7 @@ class UserCreationTest < ActionDispatch::IntegrationTest
|
||||||
assert_response :success
|
assert_response :success
|
||||||
assert_template 'user/new'
|
assert_template 'user/new'
|
||||||
assert_equal response.headers['Content-Language'][0..1], localer.to_s[0..1] unless localer == :root
|
assert_equal response.headers['Content-Language'][0..1], localer.to_s[0..1] unless localer == :root
|
||||||
assert_select "form > fieldset > div.form-row > div.field_with_errors > input#user_email"
|
assert_select "form > fieldset > div.form-row > input.field_with_errors#user_email"
|
||||||
assert_no_missing_translations
|
assert_no_missing_translations
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
@ -47,7 +47,7 @@ class UserCreationTest < ActionDispatch::IntegrationTest
|
||||||
end
|
end
|
||||||
assert_response :success
|
assert_response :success
|
||||||
assert_template 'user/new'
|
assert_template 'user/new'
|
||||||
assert_select "form > fieldset > div.form-row > div.field_with_errors > input#user_display_name"
|
assert_select "form > fieldset > div.form-row > input.field_with_errors#user_display_name"
|
||||||
assert_no_missing_translations
|
assert_no_missing_translations
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue