<p></p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/pietervdvn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/pietervdvn">@pietervdvn</a> Thanks for your PR. I agree that this sort of thing could be useful for people signing up, particularly since we're a large project with many existing registrations so users are increasingly likely to find their first-choice display_name is already taken.</p>
<p dir="auto">However, there's a few things with this specific implementation that would need to be considered:</p>
<ul dir="auto">
<li>display_name checking - this can't just be done against the user profile page. Firstly, it's not designed as a lightweight endpoint, there is a lot of stuff being rendered on that page. Although using HEAD will reduce the payload, I don't think it's a good idea to call HEAD on full pages for every keystroke - the latency is likely to be too high. A better approach would be a specific endpoint, e.g. a json endpoint that only does one thing.</li>
<li>display_name checking - this also can't be done against the user profile page, due to unconfirmed users, suspended users and deleted users. These are pages that will return a 404, but the display_name is already taken.</li>
<li>Lack of tests - this needs to have some decent tests, otherwise any breakage (e.g. due to refactoring) is not going to be noticed by developers - we rarely sign up for new accounts!</li>
<li>This is "ad-hoc client-side validation" and in general that makes me hesitant. Particularly for things like character validation rules, it would be much better to drive the client-side validation from the existing model validations. Sure, this particular PR is simply for just one field on just one form, but if we write ad-hoc code we'll end up with a ton of javascript to maintain when we want to roll this out to other fields and/or other forms. So I would like to know more about what options there are in the rails ecosystem (e.g. <a href="https://github.com/judgegem/judge">https://github.com/judgegem/judge</a> or others ) that can do this properly, with less custom code for us to maintain.</li>
<li>Accessibility - I'm vaguely aware of there being <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation" rel="nofollow">APIs in modern HTML to do client-side validation</a>, and this is likely to be more involved than just flipping a class on an element. But I'm not an expert on that. If we used a framework to do this, that project team would likely have more expertise on this topic than we have.</li>
<li>Textual feedback - I would want to see the same text feedback on what the errors are when done both client-side and server-side. Just adding the class isn't enough to guide the users as to what is wrong and what they need to do to fix it.</li>
</ul>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4402#issuecomment-1854374602">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLNDHEJAU2B36YESDM3YJHN5DAVCNFSM6AAAAABASNZGVCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNJUGM3TINRQGI">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLL4SHQQGWB2CNL3DETYJHN5DA5CNFSM6AAAAABASNZGVCWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTOQ6BMU.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/4402/c1854374602</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/4402#issuecomment-1854374602",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/4402#issuecomment-1854374602",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>