# Agile Web Development with Rails 7: fields with errors are not highlighted (page 86)

**URL:** <https://forum.devtalk.com/t/agile-web-development-with-rails-7-fields-with-errors-are-not-highlighted-page-86/116546>\
**Category:** PragProg Customers\
**Tags:** book-agile-web-development-with-rails-7, errata\
**Created:** [15 July 2023 15:44 UTC](https://forum.devtalk.com/t/agile-web-development-with-rails-7-fields-with-errors-are-not-highlighted-page-86/116546 "2023-07-15T15:44:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![felipem](https://forum.devtalk.com/user_avatar/forum.devtalk.com/felipem/32/5220_2.png) [@felipem](https://forum.devtalk.com/u/felipem)\
**Post date:** [15 July 2023 15:44 UTC](https://forum.devtalk.com/t/agile-web-development-with-rails-7-fields-with-errors-are-not-highlighted-page-86/116546/1 "2023-07-15T15:44:58Z")

</div>

@rubys

> The following screenshot shows what happens if we try to submit a new product with none of the fields filled in. Try it by visiting [http://localhost:3000/products/new](http://localhost:3000/products/new) and submitting the form without entering any data. It’s pretty impressive: **the fields with errors are highlighted** , and the errors are summarized in a nice list at the top of the form.

The fields with errors are not highlighted in the screenshot and neither in the app itself at this point. Also shadows in all screenshots are rendered as a weird mobile-webkit-like outline that ignores the rounded corner’s border radius.

---

<div class="post-metadata">

**Author:** ![rubys](https://forum.devtalk.com/user_avatar/forum.devtalk.com/rubys/32/3797_2.png) [@rubys](https://forum.devtalk.com/u/rubys)\
**Post date:** [17 June 2024 14:13 UTC](https://forum.devtalk.com/t/agile-web-development-with-rails-7-fields-with-errors-are-not-highlighted-page-86/116546/2 "2024-06-17T14:13:53Z")

</div>

_sigh_. That used to work. The book has been updated to say:

By adding a bit of css, we can also highlight the fields with errors in red. Place  
the following code in app/assets/stylesheets/field\_with\_errors.css:

```auto
.field_with_errors :is(input, textarea, select) {
  border: solid red 2px !important;
}

```

If we try again, the result is more impressive.