Je suis un vieux de la vielle et pour moi, la validation de formulaire côté front est toujours passée par JavaScript. En cours, c'est ce que l'on voit et c'est normal. On doit toujours faire une validation côté serveur mais c'est bien moins agréable pour l'utilisateur en matière d'UX. On va donc chercher à faire cela côté front et donc cela passe par JS.
Mais voilà, dans la plupart des cas, nous n'avons pas de formulaire complexe. On a juste besoin de valider les saisies. Celui-ci ne fait d'ailleurs pas spécialement d'erreur en utilisation courante et cela ne pause pas de problème. Bien évidemment, on gardera JS pour les validations complexes.
Avec HTML5, de nombreuses nouveautés sont arrivées et le parc navigateur est aujourd'hui suffisamment à jour. Outre les différents champs qui ne sont pas encore standard comme le type date, les navigateurs supportent plein d'attributs qui nous sont utiles pour les validations courantes. Notamment minlength, le type email et surtout l'attribut pattern !
L'attribut pattern (pattern="") est implémenté depuis Firefox 4+ & Chrome 5+ & Opera 9.6+ & MSIE 10+, autant dire que cela date désormais. Vous pouvez ainsi utiliser des expressions régulières pour valider le contenu de vos champs. Pensez à indiquer via un petit texte sous celui-ci ce qui est attendu pour l'utilisateur car les messages ne sont pas très explicites dans les navigateurs hélas.
Une très bonne référence pour trouver des expressions est le site html5pattern.com. Bien que je sois certains que vous êtes désormais calés en expressions régulières 
En voici quelques-unes toutes simples que nous utilisons couramment :
Un champ alphanumérique :
^[a-zA-Z0-9]+$
Un nom d'utilisateur compris entre 2 et 20 caractères :
^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$
Un nom d'utilisateur Twitter (rétro-compatible) :
^[A-Za-z0-9_]{1,32}$
Un mot de passe demandant minuscules, majuscules, nombre et caractère spécial (bien que cette validation soit plus complexe et que je vous recommande d'indiquer à l'utilisateur la fragilité ou non de son mot de passe) :
(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$
Un code postal français :
[0-9]{5}
Une date au format français :
(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d
Ou ma préférée, avec validation complète et année bissextile ;) :
(?:(?:0[1-9]|1[0-2])[\/\\-. ]?(?:0[1-9]|[12][0-9])|(?:(?:0[13-9]|1[0-2])[\/\\-.]?30)|(?:(?:0[13578]|1[02])[\/\\-. ]?31))[\/\\-. ]?(?:19|20)[0-9]{2}
Un numéro de téléphone français :
^(?:0|\(?\+33\)?\s?|0033\s?)[1-79](?:[\.\-\s]?\d\d){4}$
Une couleur hexadécimale :
^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$
Et j'en passe et des meilleures ! Plus besoin pour cela de JavaScript ou encore moins de jQuery. N'oubliez pas que vous devez évidemment valider cela côté serveur comme d'habitude !
C'est la validation que j'ai choisie pour ce site en tout cas !
3