Error message when address is missing in `/developers/new` form is confusing.

[KarlHeitmann]

Describe the bug

I created my profile on railsdevs.com, and then I went to https://railsdevs.com/developers/new to fill in my personal data.

I live in "Quilpué" city in the state of "Valparaíso" in Chile, my country. I fill in the form with that information and when I attempted to save I got the error that I've uploaded in the "Screenshots section"

NOTE: :warning: :warning: When I finished writing the paragraph above, I decided to open the browser dev tools to see if I could copy-paste more debugging data, and I hit the "refresh button" and the form was submitted successfully.

I took note of the time the first error occured, it was a couple of minutes before 1:10 am UTC 06/28/2023

This is the screenshot of the original error, I couldn't reproduce.

Additional context

In general, I don't like webpages that has validates :address_fields, presence: true, not only because of privacy. But because there is always an error when you submit that data: if you use google maps, the API key is no longer valid and you can't submit the address and you're blocked. The user may be living in an unknown place where the data is not on the select field. For example, in 2018 my country had 12 states, today politicians have increased the number of states to 16 and you got a lot of things out of sync. When I see the "State" field on a form I wonder: what do this "state" input field means? It is the state acronym? or is the name of the state itself? will I start typing and select the state from a list? if a list does not appear as I type the name of the state, is the feature broken? will the form be submitted correctly when I click the "submit" button?

And lastly, on this particular case, why I am getting these 3 errors and the form shows only one field in red color?

Location time zone can't be blank
Location UTC offset can't be blank
Location city can't be found

I am willing to work on enhancing these input fields for the form to give the user a better experience. I have not yet looked at the code of this page neither the model. This week I will take a look. Any feedback is welcome.

[KarlHeitmann]

There is something weird going on. I tried to replicate the bug on localhost but I didn't fill in the avatar (didn't know it was a mandatory field). I submitted the form and got an error complaining that the avatar is required. I filled in the avatar, submitted the form and the error persisted. But then I refreshed the page and... Boom! My developer record was created although the avatar error persisted.

It's being hard to replicate this issue. I tried to make another developer and got the same error described on the main post, but then I deleted the record tried again and failed to replicate the issue.

Are you using turbo to render fragments of pages? While I was testing the form, I noticed when I filled in correctly the form at first time and then I hit the "Save" button, the button will change its icon and show a "loading..." animation. But when the animation finishes....... nothing happens! the URL is still the same: /developers/new, there is not a "flash message" telling you the record was saved. The user has no feedback (not even a redirection) to tell him what was the result of the operation he just did: was successful or failed?

Maybe this is what is generating confusion. If at first time you missed a field of the form, you will get a flash error message telling you what went wrong. But then when you fix the error on the form and hit save, the form will be submitted, the record will be saved, but the web page will not show any feedback, neither will remove the flash message. So you can get confused.

I will try to make something to tell the user when he submits a form without errors, that operation was successful, maybe should I include a redirect to other page?

[joemasilotti]

In general, I don't like webpages that has validates :address_fields, presence: true, not only because of privacy.

My goal was for this to not be true. But I verified and it looks like you need to at least submit a country for the validation to pass.

I'm open to accepting a PR that makes the has_one :location optional on the Developer model. As this was what I originally intended.

As for the other issues I'm not entirely sure what's going on. If you can reproduce in a way that works most/all of the time I can help debug.

[KarlHeitmann]

I am working on the PR to make optional the has_one :location. The change in the model is simple and is working, but the form is sending the :location_attributes key even though the user left the fields blank. I will figure out how to remove completely the nested hash if the fields are left blank.

About the other issue, it has to do with the error messages and success messages. The idea is to give the user more feedback about what is going on. I'll think about a proposal and show it to you, if you like it you can accept the PR.

Best.

[joemasilotti]

Sounds good - looking forward to it!

[KarlHeitmann]

Update: I am working on the issue, made a test that is now passing. But I was manually testing the app on my localhost using my web browser and got the original error. I prepared this video because it is hard to explain with words. In a nutshel: it appears railsdevs is using a library/gem to automatically fetch the location based on input data provided by the user on the form. But there are no visual cues to tell the user he must input the location in a specific format or by following certain rules so the library can set the location right. In addition, the flash error message does not provide accurate feedback for the user. I hope this video explains the issue better.

Video: https://youtu.be/hTktKBCb8ZE

I don't know how to solve the issue, because I am not certain that the application is using another gem to find the city. Is this line app/models/location.rb#L48 the one that fetches the location using the? I'd like to solve this flash error message issue. It could be (as user story):

When I visit the /developers/new page with the purpose to add my developer profile, but I made a mistake on the input field of the location, along with the "city can't be found" error I should see a yellow alert message telling me: "The application fetches your location automatically. Any misspelling will make the application fail to fetch your location. Ensure the city is written correctly. The location is optional, you can leave it blank."

That's my proposal, if you have a better message you can write it down.

Best

[joemasilotti]

Hey @KarlHeitmann, I'd love to see a warning when the location can't be fetched!

If you have appetite please open a PR. I'm going to close this issue for now but am happy to reopen if you want to work on it.