ProtoFormClass - form validation + Ajax submit .

18/03/2009

Protoform diventa ProtoFormClass: ho finalmente trovato il tempo per rimettere mano al mio script per la validazione dei moduli lato client e l'invio dei dati al server con una chiamata  Ajax. Ho raggiunto gli obiettivi che mi ero prefisso, fermo restando i punti cardine dello script, ossia la leggerezza e semplicità della libreria (pochi fronzoli) e la capacità di non impedire l'invio del modulo quando javascript è disabilitato (unobtrusive coding).

In particolare il codice è più compatto e meno prolisso, e costruendo una classe è stato reso più adeguato alle esigenze dell'Object Oriented Programming.

Inoltre ho semplificato molto le modalità di configurazione e l'istallazione  dello script è ora veramente un gioco da ragazzi.

Questa piccola libreria permette di validare anche più moduli nella stessa pagina, controlla la presenza dei campi obbligatori (input, textarea, radio, select, checkbox) e la validazioni di email, url, numeri telefonici e date: i campi errati vengono evidenziati ed è abilitato di default l'invio dei dati in Ajax, ma è possibile escludere questa opzione e fare il submit del form nel modo consueto. 

ProtoFormClass richiede naturalmente la presenza della libreria Prototype.

Tag: ajax validation prototype form
  • Social:
  • delicious
  • digg
  • diggita
  • facebook
  • google
  • reddit
  • segnalo
  • technorati
  • technotizie
  • twitter
  • yahoo
  • wikio

Commenti

1) 11 novembre 2008 - inserito da Miguel Amante

Hi. Great Work !!!!!!!!!! very nice, and simply but, I Can send the form data( name, telephone, email, message) to a email? Please help me Thank You

2) 26 novembre 2008 - inserito da Jay

Hi, thanks this is a very useful script. Do you think though you could add the php send function/script so it's fully functional? It would be a great help.

3) 27 novembre 2008 - inserito da Miguel Amante

Check it! http://enhance.qd-creative.co.uk/2008/06/20/ajax-contact-form/ Im try experiment with this code Cheers...

4) 06 marzo 2009 - inserito da Wade

I like the form, this is the best I've come across. I would like to see it verify passwords too.

5) 21 marzo 2009 - inserito da Leleman Corp

how check the radio buttons ?

6) 21 marzo 2009 - inserito da Jarod

I'm not sure if I'm blind, or not, but where is the config/functions to actually send the email to an address?

7) 24 marzo 2009 - inserito da edwin

I love the work you have done, but can you please tell me were and how I have to validate/ my own email?, greatly appreciate it. Thanks

8) 27 marzo 2009 - inserito da Filippo Buratti

@ Leleman Corp
I made some corrections and we are now able to validate checkbox and radio (id_Req). There is no validation of multiple checkbox and radio (with the same attribute name): working to implement it. you can download the archive 1.1 (last update 27 / 3).

9) 30 marzo 2009 - inserito da Eddie

Awesome validation form :) I love it, but can someone please help me so it can sends the messages to my email sorry I'm new to PHP and I don't really understand thanks you. Email: lil.eddy@gmail.com

10) 30 marzo 2009 - inserito da Chris

Is there going to be an update with a php mailer included in the send.php?

11) 31 marzo 2009 - inserito da Filippo Buratti

Protoform is a small script to validate (client side) forms that allows the submit via ajax, can 'be used for sending e-mail, but is a feature that goes beyond the aim of Protoform. However, since so many people ask me, I have uploaded (link above in this post) a file with the necessary files to send an email, just replace the file send.php and include the phpmailer files. recommended a more robust validation of the data server side.

12) 01 aprile 2009 - inserito da Edwin

I like to be the first one to thank you :) excellent job!!

13) 16 aprile 2009 - inserito da redonkeechong

i'm having issues with the form, i don't think i'm doing something correctly, the form won't send emails properly and i keep getting "email not sended" do i only change the send.php file with the address for emails? or is there more i need to do. sorry, i'm new thx.

14) 19 aprile 2009 - inserito da redonkeechong

nevermind, the default file permissions were mucking up the script when i uploaded them. my bad. great work though, thx.

15) 22 aprile 2009 - inserito da cole

hi there - great stuff... thanks... i've implemented a version here, with a bit of extra formatting and funtionality on the "Required .... " messages so that they line up with the relevant part of the form. http://www.huxleyclothing.co.uk/contact hope you like!

16) 17 maggio 2009 - inserito da Victor

Did somebody implemented a AlphaNum option? I've tried but with not success, if someone could help.

17) 21 maggio 2009 - inserito da Filippo Buratti

Victor I will make the change soon: however, the regExp for alphaNum is /^[a-zA-Z0-9]+$/

18) 07 luglio 2009 - inserito da Beni

Bel lavoro! Una domanda: ho provato a pre-impostare i campi della form con un certo valore, es. value="Andrea", ma non funziona correttamente.....l'attributo "value" viene ignorato. C'e' un modo diverso per farlo ? Grazie

19) 07 luglio 2009 - inserito da Filippo Buratti

Ciao Beni, non ho ben capito perchè l'attributo value se impostato nei campi non ti funziona correttamente, e in quali casi viene ignorato. Posta un esempio che controlliamo, deve andare per forza.

20) 07 luglio 2009 - inserito da Beni

Ecco Filippo, ho inserito il valore "Andrea Rossi" nel campo "name", questo l'estratto del tuo codice (index.html) da me modificato: <div> <label for="name_Req">Name<span>*</span></label> <input type="text" id="name_Req" value="Andrea Rossi" name="name" title="Required! Please enter your name" /> </div> Forse sbaglio io qualcosa.....non sono molto esperto in questo campo. Grazie

21) 07 luglio 2009 - inserito da Beni

Tutto risolto. Come mi hai segnalato Filippo deve esserci stato un problema di cache ed i campi value vengono effettivamente gestiti correttamente da ProtoForm. Grazie!!

22) 06 agosto 2009 - inserito da Lasitha

Hello... Its a great script. Can we put an image validation to this script. i am working on it, but i caught up with some issues. if you have already done it please let me know... Thank you. Lasitha

23) 01 settembre 2009 - inserito da gideon

I would like to see it get ported to jquery. Prototype is kinda old news.

24) 10 ottobre 2009 - inserito da Naresh

hello sir i have used ur javascript form validation in details and it works beautifully.But the problem with me is that i want to the control to some other page then i dont want to cocatenate server response with previous page content like in ur page.tell me what changes are required to do that so that i can use this script in my projectsi want response in a fresh new page.

25) 27 febbraio 2010 - inserito da Diego

Great script Filippo!! Do you consider add an OPTIONAL group of fields (for example telephone OR address)?

26) 07 marzo 2010 - inserito da Amummock-online

necesidad de comprobar:)
Inserisci un commento
codice di sicurezza

(*) Campi obbligatori

L'html nel testo del commento è abilitato: i tag consentiti sono: a, em, strong, p, code, pre, quote e br.

Gli attributi dei tag utilizzabili sono title e href.

TAG CLOUD: javascript posizionamento classi cronologia w3c apple lightbox xml gallery youtube percentuale standard canvas json switcher pixastic css geocoding weather back button object-oriented carousel loading mp3 php lazy loading drag&drop class create skim ajax responders mootools jquery effect parallel prototype dreamveawer modal gmaps mp3 player pspad vimeo open source form firefox scriptaculous cookie validation google maps cuthtmltext ajax playlist video immagini firebug history meteo zoom effect queues bindaseventlistener string regex slideshow safari accessibilità player crossfade
follow me on Twitter