# Turbo-rails 0.5.3 form validation errors

**URL:** <https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885>\
**Category:** General\
**Created:** [January 6, 2021, 9:52am UTC](https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885 "2021-01-06T09:52:05Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![jsagl](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jsagl/32/1369_2.png) [@jsagl](https://discuss.hotwired.dev/u/jsagl)\
**Post date:** [January 6, 2021, 9:52am UTC](https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885/1 "2021-01-06T09:52:05Z")

</div>

Hi everyone,

So I started playing around with turbo, faced the issue of the form validation errors and saw that it was addressed by turbo-rails 0.5.3. I upgraded the gem, ran rails turbo:install again and tried to implement it, but don’t know what I do wrong. The “new.html.erb” is rendered without full page reload, but the whole page content is replaced instead of just the frame.

I don’t have any issue when the form is submitted without errors. The new book is appended to the index, the form is reset without a full page reload and everything works, fine, I can submit again, etc. But when form validation fails, I expect to have the content of the ‘create\_book’ frame to be replaced by the error div (illustration purpose) and have the rest of the page remain the same. Instead, I end up with just the error div, without the rest of the page (and without page reload). The 422 response is shown below. What am I missing ?

_Code sample below:_

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/stimulusjs/original/2X/e/e032f66c55904de6bd74062a82b3d7ac35814056.jpeg)

Thank you very much !

PS: If you want to take a look, I played around a bit and made a full datatable with search, filter, inline cell edition, etc. (missing form validation for now though :p). Very glad to be able to do this with limited JS. Heroku so 30sec load time. [https://hotwire-datatable.herokuapp.com/](https://hotwire-datatable.herokuapp.com/)

---

<div class="post-metadata">

**Author:** ![pedromschmitt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/pedromschmitt/32/1235_2.png) [@pedromschmitt](https://discuss.hotwired.dev/u/pedromschmitt)\
**Post date:** [January 6, 2021, 11:04am UTC](https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885/2 "2021-01-06T11:04:15Z")

</div>

Greate example. Is very fast. It is available to check on an open GitHub repo?

---

<div class="post-metadata">

**Author:** ![jsagl](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jsagl/32/1369_2.png) [@jsagl](https://discuss.hotwired.dev/u/jsagl)\
**Post date:** [January 6, 2021, 11:21am UTC](https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885/3 "2021-01-06T11:21:50Z")

</div>

There you go [https://github.com/jsagl/hotwire-datatable](https://github.com/jsagl/hotwire-datatable)

I wouldn’t look too hard at the CSS though, I’m more of a backend dev 😅

---

<div class="post-metadata">

**Author:** ![jsagl](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jsagl/32/1369_2.png) [@jsagl](https://discuss.hotwired.dev/u/jsagl)\
**Post date:** [January 7, 2021, 11:01am UTC](https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885/4 "2021-01-07T11:01:28Z")

</div>

Ok, I found out why it was not working, but don’t understand why.

I replaced in `index.html.erb`  
`<%= turbo_frame_tag 'create_book', src: new_book_path, target: '_top' %>`  
by  
`<%= turbo_frame_tag 'create_book', src: new_book_path %>`

and voilà, it works. So if anybody as insights as to why it did not work / can explain what exactly is ‘target’ / how ‘target’ exactly works, I’d be happy to hear about it.

Thank you

---

<div class="post-metadata">

**Author:** ![jacobdaddario](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jacobdaddario/32/1183_2.png) [@jacobdaddario](https://discuss.hotwired.dev/u/jacobdaddario)\
**Post date:** [January 7, 2021, 6:25pm UTC](https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885/5 "2021-01-07T18:25:08Z")

</div>

`target="_top"` is an attribute used on Turboframes that forces a full page visit as opposed to just the frame being replaced. You can read about it [in the Turbo reference.](https://turbo.hotwire.dev/reference/frames#frame-that-drives-navigation-to-replace-whole-page)

---

<div class="post-metadata">

**Author:** ![MrHubble](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/mrhubble/32/264_2.png) [@MrHubble](https://discuss.hotwired.dev/u/MrHubble)\
**Post date:** [January 13, 2021, 1:17am UTC](https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885/6 "2021-01-13T01:17:48Z")

</div>

I’ve run into the same situation where the whole page content is replaced instead of just the frame.

I’m guessing that with the new `4xx/5xx` error handling, Turbo Drive replaces the `body` with the response.

If we respond with a specific Frame, the whole body will be replaced, not just the frame.

Is anyone able to confirm if this is correct and intentional?

---

<div class="post-metadata">

**Author:** ![jsagl](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jsagl/32/1369_2.png) [@jsagl](https://discuss.hotwired.dev/u/jsagl)\
**Post date:** [January 13, 2021, 10:14am UTC](https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885/7 "2021-01-13T10:14:02Z")

</div>

I don’t think this is intentional. As I mentioned, I managed to replace only the frame on a 422 response by removing the target: \_top attribute. Are you sure you are using the latest version of turbo / of the gem ? Do you want to share your code ?

---

<div class="post-metadata">

**Author:** ![MrHubble](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/mrhubble/32/264_2.png) [@MrHubble](https://discuss.hotwired.dev/u/MrHubble)\
**Post date:** [January 13, 2021, 10:23am UTC](https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885/8 "2021-01-13T10:23:57Z")

</div>

You’re right. I believe the behaviour I was experiencing had to do with how I was submitting my form. I was submitting the form in my stimulus controller with `Turbo.navigator.submitForm()`.

When I try a different approach using a hidden submit button which I `click()` in my stimulus controller, the frame is replaced with the new frame as desired and expected.

---

<div class="post-metadata">

**Author:** ![jsagl](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jsagl/32/1369_2.png) [@jsagl](https://discuss.hotwired.dev/u/jsagl)\
**Post date:** [January 13, 2021, 10:36am UTC](https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885/9 "2021-01-13T10:36:15Z")

</div>

Yes, I read somewhere that you need to submit foms using ‘click’. Using submit() won’t work.

---

<div class="post-metadata">

**Author:** ![MrHubble](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/mrhubble/32/264_2.png) [@MrHubble](https://discuss.hotwired.dev/u/MrHubble)\
**Post date:** [January 13, 2021, 10:39am UTC](https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885/10 "2021-01-13T10:39:34Z")

</div>

Thanks for confirming. Please do share the source if you ever remember where you read that.

---

<div class="post-metadata">

**Author:** ![jsagl](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jsagl/32/1369_2.png) [@jsagl](https://discuss.hotwired.dev/u/jsagl)\
**Post date:** [January 13, 2021, 10:53am UTC](https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885/11 "2021-01-13T10:53:52Z")

</div>

Found it 🙂 [https://github.com/hotwired/stimulus/issues/92](https://github.com/hotwired/stimulus/issues/92)

---

<div class="post-metadata">

**Author:** ![werks](https://avatars.discourse-cdn.com/v4/letter/w/d78d45/32.png) [@werks](https://discuss.hotwired.dev/u/werks)\
**Post date:** [July 6, 2021, 4:12pm UTC](https://discuss.hotwired.dev/t/turbo-rails-0-5-3-form-validation-errors/1885/12 "2021-07-06T16:12:28Z")

</div>

Hi. Not sure why but the code does not work as it does in the demo on Heroku. Specifically, creating a new record returns 406 error and reloading the page shows newly created record (editing records works as it does in the demo).

Also, live search stops after the first character is typed or a search term is pasted in and returns whatever results match what is typed or pasted in (pasting an entire word, for example, returns the results as per the demo site).
