Ipadayeg ang imong mga Bisita sa real-time nga Pagpanghimatuud sa Form

online nga porma

Ang una nga impresyon nga kasagaran adunay kanimo ingon usa ka tiggamit sa usa ka Web Application kung imong pun-on ang usa ka web form. Nahingangha ako sa gidaghanon sa mga porma sa web didto nga adunay zero nga pagpanghimatuud o naghulat alang kanimo nga isumite ang imong sulud sa porma sa wala pa isulti kanimo kung unsang mga problema ang mahimo nimo.

Ang akong lagda sa kumagko mao nga ang bisan unsang dili mapanghimatuud gisuportahan. Bisan unsang butang nga mahimong mapamatud-an sa wala pa isumite ang porma kinahanglan. Sa pag-abut sa Ajax, mahimo pa nimo mapanghimatuud ang datos kontra sa imong database sa wala pa isumite. Ayaw pagpili sa tapulan nga ruta - Ginaapresyar sa mga ninggamit ang tabang!

Ania ang pipila ka mga ehemplo:

  1. Email Addresses - Wala ko igsapayan ang mga porma nga pun-on nimo ang imong email address kaduha aron ma-validate kini, apan ang kamatuuran nga wala nila kini gisulti kanimo kung nagtugma sila o dili husto nga gitukod dili ikapangayo pasaylo.
  2. Mga Sandi - Kung himuon mo nga type ako usa ka password kaduha, nan palihug pamatud-i nga managsama ang mga kantidad sa wala pa i-post ang form
  3. Kalig-on sa Password - Kung nanginahanglan ka usa ka piho nga kusog sa password (kombinasyon sa mga alphanumeric character o kaso), paghatud og pipila ka mga feedback alang kanako samtang nag-type ko sa akong password. Ayaw paghulat nga isumite ko sa wala pa ako suginli nga kini napakyas.
  4. Petsa - Kung gusto nimo ang petsa sa am / d / yyyy format, unya tugoti ako nga isulud ang kasayuran sa usa ka natad pinaagi sa pag-type sa mga kantidad ug husto nga pag-format niini. Kung gusto nimo ang mga nag-una nga zero, ibutang kini pagkahuman. Maayo nga ipakita ang usa ka pormat ug i-save ang lain pa sa imong database.
  5. Petsa Karon - Pun-a kini alang kanako! Ngano nga gihangyo mo ako nga pun-on ang petsa kung nahibal-an na nimo kini ?!
  6. Format sa Petsa - Kung adunay ka internasyonal nga aplikasyon, mahimo nimong defaulton ang usa ka format sa petsa nga gibase sa Internationalization sa imong aplikasyon. Bitaw, maayo nga adunay kapilian alang sa mga ninggamit sa pagdili sa kana nga kapilian ug pagpili sa ilang kaugalingon.
  7. Mga Numero sa Seguridad sa Social - Kini yano nga pagdugang sa pipila ka javascript nga awtomatikong molukso gikan sa us aka uma ngadto sa uma o sa programa nga gibutang ang usa ka dash taliwala sa mga kantidad.
  8. Mga Numero sa Telepono - nga gikonsiderar ang Internationalisasyon, kini nga mga lahi sa uma mahimong mahimo usab nga gipasimple pinaagi sa pag-format sa numero sa telepono sa interface, apan ang pag-save niini sa us aka format nga episyente alang sa imong back-end. Ayaw himoa nga tipo ang imong mga taggamit sa parentesis, mga wanang, ug mga dash.
  9. Maximum nga gitas-on sa teksto - kung gilimitahan nimo ang gidaghanon sa mga karakter nga gitipig sa imong database, unya AYAW ko pag-type nga daghang mga karakter sa! Wala man kini nanginahanglan lisud nga pamatud-an… usa ra kini nga setting sa textbox.
  10. Minimum nga gitas-on sa Text - kung kinahanglan nimo ang usa ka minimum nga gitas-on sa teksto, ipatingog ang alarma hangtod nga adunay ako igo nga mga karakter.

Ania ang usa ka pananglitan sa usa ka paglihok sa Kalig-on sa Password gikan Kaalam sa Geek:

Type ang password:

UPDATE: 10/26/2007 - Nakit-an nako ang usa ka hapsay nga kahinguhaan nga adunay usa ka JavaScript library nga magamit alang sa pag-download porma nga pagpanghimatuud, gitawag nga LiveValidation.

16 Comments

  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.

    Maayo nga mga punto, apan dili gyud us aka butang nga "kinahanglan" sa matag porma sa online sa akong hunahuna.

  2. 2

    Ang checker sa password relativly nga nabuak. Ang bisan unsang password igoigo kung taas kini.

    Panig-ingnan:

    Kini ba tinuud usa ka wala’y pulos nga password?

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

  3. 4

    Alang kanako ang labing kaayo nga pagpanghimatuud sa porma mao ang paghatag nimo sa tiggamit sa impresyon sa usa ka validation sa kilid sa kliyente samtang kini AJAX / Server side validation.
    Kinahanglan ra nimo nga igdugtong sa imong mga elemento sa porma ang pipila nga pagdumala sa kalihokan (keyup, blur, click, ug uban pa) nga nag-post sa tibuuk nga porma pinaagi sa AJAX sa server, nga naghangyo sa usa ka "check" nga function nga ibalik ang katugbang nga mga mensahe sa sayup (kini nga passowrd usab yano, ang kana nga petsa naa sa sayup nga pormat, ug uban pa…)
    Kung sa katapusan gi-post sa tiggamit ang porma pinaagi sa pag-klik sa usa ka buton nga isumite, mahimo mo pa usab magamit ang "check" nga function sa kilid sa server aron mapamatud-an ang usa ka katapusang higayon nga porma sa wala pa isulud ang datos sa usa ka database o uban pang proseso.
    Niining paagiha, nalipay ang mga ninggamit sa onthego nga pagpanghimatuud UG ang mga developpers nalipay sa pag-uswag sa validation lamang sa server.

    • 5
      • 6

        Dili ingon ka dali Doug - Uyon ako sa imong orihinal nga gihunahuna nga kining makatabang nga mga dagway, sama sa pag-format sa SSN sa langaw wala’y hinungdan. Ug tapulan nga mag-post lang usa ka mensahe nga sayup, kung mahimo nimo kini ayuhon nga dili kinahanglan makatag-an sa format.

        Bisan pa, miuyon usab ako kang Nicolas bahin sa paggamit sa lohika sa Server Side kauban ang AJAX.

  4. 7

    Giingon sa imong titulo nga "Impresibo ang Imong Mga Higala…" apan napakyas ka sa pagpadayeg kanako sa niining 2 min, gitawag sa post.

    Igsulat usab ang imong titulo (labi ka makapahisalaag, nakapahunahuna sa usa nga adunay mga pananglitan ug mga binatasan nga gihisgutan).

    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.

    Ang tinuud nga mga programmer sa web nahibal-an na ug gibuhat kini.

    • 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.

      Salamat sa paggahin og oras!
      Doug

  5. 9

    Hingpit nga uyon ako bahin sa pagpanghimatuud nga usa ka kinahanglan nga sangkap sa bisan unsang aplikasyon. Ingon usa ka tim nga nanguna, kanunay nakit-an nako ang akong kaugalingon nga nagpadala usab og code aron "mahuman" alang sa mga hinungdan sama sa nawala nga mga pagpanghimatuud o pagpugong sa gitas-on sa pag-input sa teksto.

    Alang sa kadaghanan nga mga butang nga akong gitrabahoan nakit-an nako nga nagkinahanglan og 50% sa oras aron makakuha usa ka butang nga nagtrabaho, sa ilalum sa normal nga mga kondisyon ug kung gigamit sa mga ninggamit ang sistema sa akong gituyo. Ang uban pang 50% nga oras sa pag-uswag naggikan sa pagsusi sa ilang pagsulud, pagsiguro nga ang integridad sa datos mapadayon, ug ang paghimo sa mga umahan sa porma dili tugotan nga masulud ang makadaot nga datos.

    Gisulat ko ang usa ka post kung giunsa nako gigamit ang InputVerifiers sa akong hava swing apps, ug gipakita kung giunsa nako gipanghimatuud ang usa ka natad sa teksto sa email. Ang regular nga ekspresyon nga akong gigamit dali nga mabag-o aron mapamatud-an ang mga numero sa telepono, zipcode, SSN, ug uban pa.

    Ang akong blog post naa sa http://timarcher.com/?q=node/36

    Maayo nga pagsulat Doug!

  6. 10

    Sugot ko Ang mga password hinungdanon gyud ug kinahanglan seryosohon. Sa akong hunahuna normal ra alang sa hapit tanan nga porma ang pag-type sa password makaduha, apan dili gipakita ang kabalido sa duha nga mga password nagpakita nga wala kini giisip nga seryoso.

  7. 11

    Uyon ako nga ang pagpanghimatuud sa kliyente mahimo nga usa ka kaayo nga dagway sa mahigalaon sa tiggamit. Bisan pa, labi ka hinungdan nga masiguro nga ang mga pagpanghimatuud sa ilang kaugalingon tinuud adunay kahulugan.

    Naghatag ka usa ka mahayag nga pananglitan kung giunsa ang pagpanghimatuud makapahisalaag sa mga naggamit ug, labi ka daotan, palayason sila gikan sa among site:

    Ang pag-validate sa kusog sa password sa Geek Wisdom gikan sa mga giisip tZhKwnUmIss mahimong usa ka mahuyang nga password. Dili ra kini usa ka hingpit nga kusug nga password apan kini usab magpahilayo sa mga ninggamit tungod kay naghatag kini kanila sayup nga impresyon nga ang pag-log in sa imong site gamit ang kini nga password mahimo’g dili sigurado.

    Labi ka maayo (ug kadali) nga gipasabut ra ang mga ninggamit sa us aka maayo nga password nga labing menos unom ka mga karakter ang gitas-on ug kinahanglan adunay sulud nga mga numero ug letra.

    Ang uban pang kuwestiyonable nga mga pagpanghimatuud adunay mga ngalan sa tiggamit nga kinahanglan usa ka piho nga labing gitas-on o dili mahimo’g adunay sulud nga mga wanang. Unsa man sayup sa mga username X, john doe, o bisan pa # *! §? Makaya nako kana.

  8. 12

    Uyon ko nimo Ang pila ka porma maayo tan-awon, apan wala kini maayong pagtanyag. Gihatag ang personal nga kasayuran ug angay lamang nga seryosohon kini sama sa bisan unsang mga porma sa negosyo nga lisud nga kopya.

  9. 13
  10. 14
  11. 15

    Nakita nako nga usa ka gamay nga makalingaw nga imong gi-post ang bahin sa kaayo sa paghatag sa realtime form validation ug bisan pa, ang imong form sa komentaryo sa ilawom sa post wala maghatag bisan usa sa mga kini…

    Nahibal-an ko nga naggamit ka sa WordPress aron i-blog ang imong mga hunahuna sa internet, apan tingali ang pagsiguro nga imong gipraktis ang imong giwali dili usab daotan nga ideya. 🙂

    Maayo nga post, by the way, bisan kung dili ko kinahanglan nga mouyon sa tanan nimong gisulat.

    • 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 balayan sa pagpanghimatuud ug gusto nga makita ang us aka tawo nga gihiusa ang duha!

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

Unsay imong hunahuna?

Kini nga site naggamit sa Akismet sa pagpakunhod sa spam. Hibal-i kon giunsa ang pagproseso sa datos sa imong komento.