bootstrap_form icon indicating copy to clipboard operation
bootstrap_form copied to clipboard

Generate .invalid-feedback elements for use with ajax form submission

Open G-Rath opened this issue 6 years ago • 2 comments
trafficstars

Relates to #502

Bootstrap uses .invalid-feedback elements placed after inputs to show validation messages when an input errors. However, when converting a form to use ajax, bootstrap_form doesn't provide the .invalid-feedback elements unless there's an actual error on page render, meaning I'd have to use (extra) jQuery code to figure out if an feedback div existed for a specific input, append a new element if it didn't, and update the message.

It would be cool if bootstrap_form supported a generate_empty_invalid_elements flag for when we want to do forms async.

G-Rath avatar Jan 20 '19 20:01 G-Rath

I guess this is useful for the non-rails case. In the Rails case, I'd recommend using rails-ujs or jquery-ujs remote forms to submit, and have the form partial returned with an error code (:unprocessable_entity is what we use). And then replace the form over itself.

simmerz avatar Jan 31 '19 11:01 simmerz

I think @simmerz has a good point, but I've always felt that that approach isn't well-explained on the web. For self-taught Rails folks like me, the process isn't clear. I went looking again for a good tutorial, and didn't find exactly what I was looking for. The first half of this blog post is reasonably clear: https://blog.codeship.com/unobtrusive-javascript-via-ajax-rails/. (The second half of the blog post is really another topic, I think.) @G-Rath let me know if that post clears anything up, or if you've found another solution for this issue.

Also, Bootstrap has a valid-feeback class that you can use for fields that don't have errors. I'd be afraid that by generating an often-empty div.invalid-feedback, we might cause more problems than we solve.

lcreid avatar Feb 07 '19 19:02 lcreid