# How to handle form errors

**URL:** <https://discuss.hotwired.dev/t/how-to-handle-form-errors/199>\
**Category:** General\
**Created:** [March 20, 2018, 8:09pm UTC](https://discuss.hotwired.dev/t/how-to-handle-form-errors/199 "2018-03-20T20:09:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![helio-correia](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/helio-correia/32/79_2.png) [@helio-correia](https://discuss.hotwired.dev/u/helio-correia)\
**Post date:** [March 20, 2018, 8:09pm UTC](https://discuss.hotwired.dev/t/how-to-handle-form-errors/199/1 "2018-03-20T20:09:21Z")

</div>

Hi guys,

I am a django developer, and I am trying have you try to implement a form in stimulus? I’m a bit confused with something, let me explain.

I felt that stimulus encourages us to use html over json. So for example, in a todo app, if I have a form to create a new task - when I submit with a valid input, I return from the server the html with that task and insert that html in the task list.

That one feels great, but what about when the form gets an error? Here I’m says errors from the server, like the task has already another with the same name for example. You return an html with the errors too?

When you choose to use stimulus over turbo links? What your thoughts about that?

Best Hélio

---

<div class="post-metadata">

**Author:** ![kikito](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/kikito/32/145_2.png) [@kikito](https://discuss.hotwired.dev/u/kikito)\
**Post date:** [March 20, 2018, 10:58pm UTC](https://discuss.hotwired.dev/t/how-to-handle-form-errors/199/2 "2018-03-20T22:58:07Z")

</div>

> When you choose to use stimulus over turbo links? What your thoughts about that?

You can use stimulus _and_ turbolinks together. They are designed to work well with each other.

> Here I’m says errors from the server, like the task has already another with the same name for example. You return an html with the errors too?

That is one option, yes. If you are using turbolinks you can just make a POST and get a new page back, leaving turbolinks to handle the page refresh so it feels fast.

---

<div class="post-metadata">

**Author:** ![Alexandr\_K](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/alexandr_k/32/114_2.png) [@Alexandr\_K](https://discuss.hotwired.dev/u/Alexandr_K)\
**Post date:** [March 21, 2018, 9:29am UTC](https://discuss.hotwired.dev/t/how-to-handle-form-errors/199/3 "2018-03-21T09:29:33Z")

</div>

In my project I use also rails-ujs and often use so called Server-generated JS responses (SJR).

In case of error I trigger `CustomEvent` on `document` with error in detail. Server returns following JS and browser evaluate it:

```auto
var event = new CustomEvent('action:error', {
  detail: {
    message: "<%= j errors_text.html_safe %>"
  }
});

document.dispatchEvent(event)

```

And I have controller that handle it. Source code: [https://github.com/skyderby/skyderby/blob/dev/app/javascript/controllers/action\_errors\_controller.js](https://github.com/skyderby/skyderby/blob/dev/app/javascript/controllers/action_errors_controller.js)

Here is how it looks like:

 ![50](https://canada1.discourse-cdn.com/flex027/uploads/stimulusjs/original/1X/0d52472e88c121327317c703e7def9651f7bae81.png)

---

<div class="post-metadata">

**Author:** ![helio-correia](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/helio-correia/32/79_2.png) [@helio-correia](https://discuss.hotwired.dev/u/helio-correia)\
**Post date:** [March 21, 2018, 10:57pm UTC](https://discuss.hotwired.dev/t/how-to-handle-form-errors/199/4 "2018-03-21T22:57:45Z")

</div>

Yeah I know that we can use together, its more about in which actions do you use turbo links and which parts you use stimulus.

---

<div class="post-metadata">

**Author:** ![helio-correia](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/helio-correia/32/79_2.png) [@helio-correia](https://discuss.hotwired.dev/u/helio-correia)\
**Post date:** [March 21, 2018, 11:22pm UTC](https://discuss.hotwired.dev/t/how-to-handle-form-errors/199/5 "2018-03-21T23:22:14Z")

</div>

Okay, Thanks for share. I’ve made a version more less with that idea if I understand it wright.

With that approach I have to create an extra target, because if I print the error from the server (for example the field is required) when i submit again with a value the error message don’t disappear.  
With that extra target it works, but maybe here, with turbo links make it nicer.

With the following code if it passes clears the error message if exists and append the new task on the current one. If it fails it renders the partial template with the input and the error.

```auto
axios.post(form.getAttribute('action'), {name: this.nameTarget.value})
      .then((response) => {
        Turbolinks.visit('/', { action: 'replace' });
      }).catch(error => {
        form.innerHTML = error.response.data.template
      });

```

Maybe this one type of project a todo list has a bit more logic to just use stimulus, with the addition of turbo links simplify the code. For sites more simples when you just need some simple “sprinkles” using stimulus standalone it enough.

---

<div class="post-metadata">

**Author:** ![jorge](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/jorge/32/461_2.png) [@jorge](https://discuss.hotwired.dev/u/jorge)\
**Post date:** [February 18, 2019, 10:30am UTC](https://discuss.hotwired.dev/t/how-to-handle-form-errors/199/6 "2019-02-18T10:30:19Z")

</div>

I wrote a [piece about dealing with form errors with modern Rails](https://www.jorgemanrubia.com/2019/02/16/form-validations-with-html5-and-modern-rails/). It [features a stimulus controller](https://github.com/jorgemanrubia/rails-form-validations-example/blob/master/app/javascript/controllers/form_controller.js) leveraging HTML5 form validations for the client-side and some tips on how to handle server-side validations in a consistent manner.