HTML Input Validation is (maybe) Good

by Wes GouletI think of client-side validation as a progressive enhancement for your users. You have to validate user input on the server (you can't trust what comes from the client), but some validation on the client makes for a nice UX. But that doesn't have to mean lots of JS code or using some validation library on your client. You can get pretty far with the browser's built-in HTML input validation. And then you can layer a little bit of JS on top of that to make it even better. Let's take a look at a text input. You can use pattern, minlength and maxlength to provide constraints. You can use title to provide error message. You can conditionally style invalid input with :user-invalid. Example <label for="program_name">Name of program</label><input type="text" id="program_name" minlength="3" maxlength="20" pattern="[a-zA-Z0-9]+" title="Only alphabetical and numerical characters are accepted" required/> input:user-invalid { border: 4px solid red;} When the user attempts to submit…