Impressioneu els vostres visitants web amb la validació de formularis en temps real

formulari en línia

The first impression you usually have as a user of a Web Application is when you fill out a web form. I'm amazed at the number of web forms out there that have zero validation or that wait for you to submit your form contents before telling you what problems that you might have.

My rule of thumb is that anything that is not validated is supported. Anything that can be validated prior to submitting the form must be. With the advent of Ajax, you can even validate data against your database prior to submission. Don't pick the lazy route – users appreciate the help!

Heus aquí alguns exemples:

  1. Adreces de correu electrònic – I don't mind forms that make you fill out your email address twice to validate them, but the fact that they don't tell you whether or not they match or are constructed appropriately is inexcusable.
  2. Contrasenyes – If you're going to make me type in a password twice, then please validate that the values are the same before posting the form.
  3. Solidesa de la contrasenya – If you require a certain password strength (combination of alphanumeric characters or cases), then provide some feedback for me while I'm typing my password in. Don't wait for me to submit before telling me it failed.
  4. Dates – If you'd like the date in a m/d/yyyy format, then allow me to enter the information in a single field by typing those values and formatting them appropriately. If you want leading zeros, put them in after. It's okay to display one format and save another in your database.
  5. La cita d'avui - Empleneu-ho per mi! Per què em demaneu que ompliu la data en què ja la coneixeu ?!
  6. Format de data – If you have an international application, you can default a date format based on Internationalization of your application. Of course, it's good to have an option for users to override that option and select their own.
  7. Números de Seguretat Social – it's pretty simple to add some javascript that automatically jumps from field to field or programmatically put a dash in between values.
  8. Números de telèfon – taking Internationalization into consideration, these types of fields also can be simplified by formatting the telephone number in the interface, but saving it in another format that's efficient for your back-end. Don't make your users type in parenthesis, spaces, and dashes.
  9. Longitud màxima del text – if you limit the number of characters stored in your database, then DON'T let me type that many characters in! It doesn't even require difficult validation… it's just a setting on the textbox.
  10. Longitud mínima del text - si necessiteu una longitud mínima de text, feu sonar l'alarma fins que tingui prou caràcters.

Here's an example of a Password Strength function from Geek Wisdom:

Escriviu la contrasenya:

ACTUALITZACIÓ: 10/26/2007 - He trobat un recurs ordenat amb una biblioteca JavaScript disponible per descarregar validació de formularis, anomenada LiveValidation.

16 Comentaris

  1. 1

    I agree those are great features for forms, but saying that it is “inexcusable” to not do perform front end javascript validation is a more of an personal opinion. I love working in javascript, and have written some pretty neat editmasks to do some of the things you talk about, but a lot of them are far from trivial, and many of the javascript form validation packages out there have a number of big holes. Not everyone will invest the time into duplicating their back end validation with (more often than not) more complex front end javascript validation.

    Bons punts, però definitivament no és una cosa que tots els formularis en línia "necessiten" al meu parer.

  2. 2

    El comprovador de contrasenyes està relativament trencat. Qualsevol contrasenya és prou bona si és llarga.

    Exemple:

    És realment una contrasenya mediocre?

    f46dffe6ff4ffgdfgfjfgyu656hfdt74tyhdtu5674yfgh6uhhye45herdhrt64684hythdfth54y54348fgdcvzse8cn984v3p4m6vq98476m3wuw89ewfucsd8fg67s4v8tw76u340m6tver7nt+s89346vs+0em9u+s+09hrtuhss586ysvne4896vb4865tbv089rt++

  3. 4

    Per a mi, la millor validació de formulari és quan doneu a l'usuari la impressió d'una validació del costat del client, mentre que és la validació AJAX / del servidor.
    Simplement haureu d’adjuntar als elements del formulari algun tractament d’esdeveniments (teclat, desenfocament, clic, etc ...) que publiqui el formulari sencer mitjançant AJAX al servidor, invocant una funció de “comprovació” que retorni els missatges d’error corresponents (aquest passowrd també és simple, aquesta data té un format incorrecte, etc ...)
    Quan l’usuari finalment publica el formulari fent clic a un botó d’enviament, encara podeu utilitzar la funció del servidor “comprovar” per validar la darrera vegada el formulari abans d’inserir les dades en una base de dades o en algun altre procés.
    D'aquesta manera, els usuaris estan satisfets amb la validació onthego I els desenvolupadors estan satisfets amb el desenvolupament de validació només al costat del servidor.

    • 5
      • 6

        No tan ràpid Doug: estic d'acord amb la premissa original que aquestes funcions útils, com ara el format d'un SSN sobre la marxa, són trivials. I és mandrós publicar un missatge que està malament, quan ho podeu arreglar sense haver d’endevinar el format.

        Tanmateix, també estic d'acord amb Nicolas sobre l'ús de la lògica del servidor al costat d'AJAX.

  4. 7

    El vostre títol diu "Impressiona els vostres amics ...", però no podeu impressionar-me amb aquest 2 minuts que heu trucat per correu.

    Torneu a escriure el vostre títol (massa enganyós, fa pensar que hi ha exemples i pràctiques en discussió).

    If people are not doing this already in their forms, then they are just learning or the form is not important enough to use validation.

    Els autèntics programadors web ja ho saben i ho fan.

    • 8

      Jay,

      Sorry about that! My point was definitely not to provide developer feedback – I really was coming from the point of view of a Product Manager. I agree with you – but it’s interesting that some other developers don’t! I think that’s unfortunate.

      Gràcies per dedicar-vos el temps!
      Doug

  5. 9

    Estic totalment d'acord en què la validació és un component necessari de qualsevol aplicació. Com a cap d’equip, normalment em trobo enviant de nou el codi perquè estigui “acabat” per motius com que falten validacions o restringeixen les longituds d’entrada de text.

    Per a la majoria de les coses en què treballo, crec que es necessita aproximadament el 50% del temps per aconseguir que alguna cosa funcioni, en condicions normals i si els usuaris utilitzen el sistema tal com volia. L’altre 50% del temps de desenvolupament prové de comprovar la seva entrada, assegurar-se que es manté la integritat de les dades i fer que els camps del formulari no permetin introduir dades malicioses.

    Vaig escriure una publicació sobre com faig servir InputVerifiers a les meves aplicacions de swing hava i vaig mostrar com verifico un camp de text de correu electrònic. L’expressió regular que faig servir es pot modificar fàcilment per validar números de telèfon, codis postals, SSN, etc.

    La meva publicació al bloc és a http://timarcher.com/?q=node/36

    Bona redacció Doug!

  6. 10

    Estic dacord. Les contrasenyes són realment importants i s’han de prendre seriosament. Crec que és normal que gairebé tots els formularis escriguin la contrasenya dues vegades, però no mostrar la validesa de les dues contrasenyes demostra que no es considera seriosament.

  7. 11

    Estic d'acord que la validació del client pot ser una funció molt fàcil d'utilitzar. Tanmateix, és més important assegurar-se que les validacions en sí tenen realment sentit.

    Heu proporcionat un exemple brillant de com la validació pot enganyar els usuaris i, pitjor encara, allunyar-los del nostre lloc:

    Validació de la força de la contrasenya de Geek Wisdom a partir de consideracions tZhKwnUmIss per ser una contrasenya feble. No només és una contrasenya perfectament forta, sinó que també alienarà els usuaris perquè els dóna la falsa impressió que iniciar sessió al vostre lloc mitjançant aquesta contrasenya serà d'alguna manera insegura.

    Seria molt millor (i més fàcil) suggerir als usuaris que una bona contrasenya conté almenys sis caràcters i ha de contenir tant números com lletres.

    Altres validacions qüestionables inclouen noms d'usuari que necessiten una longitud mínima determinada o que no continguin espais. Què passa amb els noms d'usuari? X, john doe, o fins i tot # *! §? Ho puc fer.

  8. 12

    Estic d'acord amb tu. Alguns formularis es veuen bé, però no ofereixen una bona validació. Es proporciona informació personal i només és adequat prendre-la seriosament, igual que qualsevol formulari comercial en paper.

  9. 13
  10. 14
  11. 15

    Em sembla una mica divertit que publiqueu sobre la bondat de proporcionar una validació de formulari en temps real i, tanmateix, el formulari de comentaris que hi ha a la part inferior de la publicació no en proporciona cap ...

    M’adono que utilitzeu WordPress per publicar els vostres pensaments a Internet, però potser tampoc no és una mala idea assegurar-vos que practiqueu allò que prediqueu. 🙂

    Una bona publicació, per cert, encara que no necessàriament estic d’acord amb tot el que heu escrit.

    • 16

      Doh! You busted me, Amanda! I do wish I had time to do better form validation and to integrate it into WordPress. I especially like the Adobe Spry marc de validació i m’agradaria veure a algú integrar-los.

      Thanks! (And I always appreciate that there are multiple opinions on any topic).
      Doug

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.