Acasă Adult66 Validarea formularului – Partea 4: Validarea formularului de abonare MailChimp | CSS-trucuri

Adult66

Validarea formularului – Partea 4: Validarea formularului de abonare MailChimp | CSS-trucuri

143

In ultimele cateva articole din aceasta serie, am invatat cum sa folosim o mana de tipuri de introducere si atribute de validare pentru a valida in mod original formularele.

Am invatat cum sa utilizam API-ul de validare a constrangerilor pentru a imbunatati procesul de validare a browserului autohton pentru o experienta de utilizator mai buna. Si am scris un polifill pentru a extinde suportul pana la IE9 (si conectati cateva gauri de caracteristici in unele versiuni mai noi).

Acum, sa luam ceea ce am invatat si sa-l aplicam la un exemplu real: formularul de inscriere MailChimp.

O forma simpla cu o amprenta mare

Cand introduceti un formular de inscriere MailChimp pe site-ul dvs., acesta vine cu un script de validare JavaScript numit `mc-validate.js`.

Acest fisier este de 140kb (minificat) si include intreaga biblioteca jQuery, doua plugin-uri terte si unele coduri MailChimp personalizate. Putem mai bine!

Consultati Validarea formularului de stilou: Formularul de inregistrare standard MailChimp de Chris Ferdinandi (@cferdinandi) pe CodePen.

Indepartarea balonului

In primul rand, haideti sa apucam un formular MailChimp fara niciun fel de balonare.

In MailChimp, unde obtineti codul pentru formularul incorporat, faceti clic pe fila cu eticheta „Naked”. Aceasta versiune nu include niciunul din CSC MailChimp sau JavaScript.

label for = “mce-EMAIL”> Adresa de e-mail <span class = “asterisk”> * </span> </label> <input type = “email” value = “” name = “EMAIL” class = “e-mail necesar” id = “mce-EMAIL”> </div> <div id = “mce-responses” class = “clear”> <div class = “response” id = “mce-error-response” style = “display: none” > </div> <div class = “response” id = “mce-success-response” style = “display: none”> </div> </div> <! – oamenii reali nu ar trebui sa completeze acest lucru si sa se astepte lucruri bune – nu inlaturati acest lucru sau nu inscrieti-va pe formularul de risc bot -> <div style = “position: absolute; left: -5000px;” aria-hidden = “true”> <input type = “text” name = “

Acest lucru este mai bun, dar mai include o marcare de care nu avem nevoie. Sa reducem acest lucru cat mai mult posibil.

Putem elimina ambalajul div # mc_embed_signup din jurul formularului.
In mod similar, putem elimina ambalajul div # mc_embed_signup_scroll in jurul campurilor din interiorul formularului.
De asemenea, putem elimina textul informand vizitatorii ca „* indica necesitatea”.
Sa eliminam clasele .mc-field-group din jurul campurilor noastre de forma si atributele goale de clasa de pe campurile in sine.
De asemenea, ar trebui sa eliminam clasele .required si .email din campul nostru de e-mail, deoarece au fost folosite doar ca carlige pentru scriptul de validare MailChimp.
Am mers inainte si am eliminat * de pe eticheta de e-mail. Cu toate acestea, depinde de dvs. cum doriti sa etichetati campurile obligatorii.
Putem sterge containerul div # mce-responses, care este folosit doar de fisierul JavaScript MailChimp.
De asemenea, putem elimina clasa .clear din div din jurul butonului de trimitere.
Sa eliminam toate atributele de valoare goale.
In cele din urma, ar trebui sa eliminam atributul novalidat din elementul formular. Vom lasa scriptul nostru sa adauge asta pentru noi atunci cand se incarca.

Toate acestea ne lasa cu o forma cu aspect mult mai curat si modest. Din moment ce CSC MailChimp este eliminat, acesta va mosteni stilurile de forma implicite ale site-ului dvs.

A se vedea Validarea formularului de pix: Formularul de inregistrare simpla MailChimp de Chris Ferdinandi (@cferdinandi) pe CodePen.

Adaugarea validarii constrangerilor

Acum, sa adaugam cateva tipuri de intrare si atribute de validare, astfel incat browserul sa poata valida in mod original formularul pentru noi.

Tipul pentru campul de e-mail este deja setat pe e-mail, ceea ce este excelent. Sa adaugam, de asemenea, atributul necesar si un model pentru a forta e-mailurile sa includa un TLD (partea .com a unei adrese). Ar trebui sa includem, de asemenea, un titlu care sa permita oamenilor sa stie ca trebuie sa aiba un TLD.

<form action = “// us1.list-manage.com/subscribe/post?u=12345abcdef&id=abc123” method = “post” id = “mc-embedded-subscribe-form” name = “mc-embedded- subscribe-form “class =” validate “target =” _ blank “> <h2> Aboneaza-te la lista noastra de mail </h2> <div> <label for =” mce-FNAME “> Prenume </label> <input type = “text” name = “FNAME” id = “mce-FNAME”> </div> <div> <label for = “mce-EMAIL”> Adresa de e-mail </label> <input type = “email” name = “EMAIL “id =” mce-EMAIL “title =” Portiunea de domeniu a adresei de e-mail este nevalida (portiunea dupa @). ” model =“ ^ ([^ \ X00- \ x20 \ x22 \ X28 \ X29 \ X2C \ x2e \ x3a- \ X3c \ x3e \ x40 \ x5b- \ X5D \ x7f- \ xff] + | \ x22 ([^ \ x0d \ X22 \ X5c \ x80- \ xff] | \ X5c [\ x00- \ x7f]) * \ x22) (\ x2e ([^ \ x00- \ x20 \ x22 \ X28 \ X29 \ X2C \ x2e \ x3a- \ X3c \ x3e \ X40 \ x5b- \ X5D \ x7f- \ xff] + | \ x22 ([^ \ x0d \ x22 \ X5c \ x80- \ xff] | \ X5c [\ x00- \ x7f]) * \ x22)) * \ X40 ([^ \ x00- \ x20 \ x22 \ X28 \ X29 \ X2C \ x2e \ x3a- \ X3c \ x3e \ x40 \ x5b- \ X5D \ x7f- \ xff] + | \ x5b ([^ \ x0d \ x5b- \ X5D \ x80- \ xff] | \ X5c [\ x00- \ x7f]) * \ X5D) (\ x2e ([^ \ x00- \ x20 \ x22 \ X28 \ X29 \ X2C \ x2e \ x3a- \ X3c \ x3e \ x40 \ x5b- \ X5D \ x7f- \ xff] + | \ x5b ([^ \ x0d \ x5b- \ X5D \ x80- \ xff] | \ X5c [\ x00- \ x7f]) * \ X5D )) * (\. \ w {2,}) + $ “obligatoriu> </div> <div style =” position: absolut; stanga: -5000px; “aria-hidden =” true “> <input type =” text “name =” b_f2d244c0df42a0431bd08ddea_aeaa9dd034 “tabindex =” – 1 “value =” “> </div> <div> <input type =” submit “valoare =”

Imbunatatirea cu API-ul de validare a constrangerilor

Acesta este un bun punct de plecare, dar putem imbunatati experienta utilizatorului adaugand scriptul de validare a formularului pe care l-am scris mai devreme in aceasta serie.

Consultati Validarea formularului de stilou: MailChimp cu API-ul de validare a constrangerilor de Chris Ferdinandi (@cferdinandi) pe CodePen.

Scriptul nostru de validare este cu doar 6,7kb inainte de modificare, ceea ce il face cu 20 de ori mai mic decat cel oferit de MailChimp. Daca dorim sa asiguram sprijinul inapoi la IE9, totusi, ar trebui sa includem polifillul nostru de stat de valabilitate si polifillul de clasa Eli Grey.

Consultati Validarea formularului de stilou: MailChimp cu scriptul API si polifilare de Chris Ferdinandi (@cferdinandi) pe CodePen.

Aceasta aduce dimensiunea noastra totala a fisierului pana la 15.5kb nemminificata – inca 9 × mai mica decat scriptul de validare MailChimp.

Trimiterea formularului cu Ajax

Scriptul `mc-validate.js` furnizat de MailChimp nu doar valideaza formularul. De asemenea, il trimite cu Ajax si afiseaza un mesaj de stare.

Cand faceti clic pe Trimiteti pe formularul nostru modificat, acesta redirectioneaza vizitatorul catre site-ul MailChimp. Acesta este un mod total de a face lucrurile.

Dar, de asemenea, putem recrea trimiterea formularului Ajax MailChimp fara jQuery pentru o experienta mai buna a utilizatorului.

Primul lucru pe care dorim sa il facem este sa impiedicam trimiterea formularului printr-o reincarcare a paginii, asa cum ar fi in mod normal. In ascultatorul nostru de evenimente, apelam la event.preventDefault daca exista erori. In schimb, sa-l numim indiferent ce.

// Verificati toate campurile de pe documentul document.addEventListener (‘trimite’, functie (eveniment) {// Rulati numai pe formularele marcate pentru validare daca (! Event.target.classList.contains (‘validare’)) returnare; // Prevenire formular de la trimiterea eveniment.preventDefault (); …}, fals);

Consultati Validarea formularului de stilou: MailChimp si Impiedicati implicit la Trimiterea de Chris Ferdinandi (@cferdinandi) pe CodePen.

Folosind JSONP

Scriptul mc-validate.js foloseste JSONP pentru a evita erorile de securitate intre domenii.

JSONP functioneaza prin incarcarea datelor returnate ca element de script in document, care apoi transmite aceste date intr-o functie de apelare care face toate operatiile de ridicare grea.

Configurarea adresei URL de trimitere

Mai intai, sa stabilim o functie pe care o putem executa atunci cand formularul nostru este gata de a fi trimis, si sa il sunam in ascultatorul nostru de evenimente de trimitere.

// Trimite formularul var submitMailChimpForm = function (formular) {// Codul merge aici …}; // Verificati toate campurile din documentul de trimitere.addEventListener (‘trimite’, functie (eveniment) {… In caz contrar, lasati formularul sa se trimita in mod normal // Puteti, de asemenea, sa incurcati intr-un proces de trimitere a formularului Ajax aici sendMailChimpForm (event.target ); }, fals);

Primul lucru pe care trebuie sa-l facem este sa obtinem adresa URL din atributul de actiune al formularului.

// Trimiteti formularul var submitMailChimpForm = function (form) {// Obtineti adresa URL de trimitere ur ur = form.getAttribute (‘actiune’); };

In scriptul `mc-validate.js`, / post? U = ‘din URL este inlocuit cu / post-json? U =. Putem face acest lucru destul de usor cu metoda substitut ().

Serializarea datelor formularului nostru

In continuare, dorim sa luam toate datele campului formularului si sa cream o sir de interogare de perechi cheie / valoare din acestea. De exemplu, FNAME = Freddie% 20Chimp & [email protected].

Sa cream o alta functie care sa ne ocupe de asta.

// Serializeaza datele formularului intr-o sir de interogare var serialize = functie (formular) {// Codul merge aici …};

Acum, vrem sa facem o bucla prin toate campurile noastre de formular si sa cream perechi cheie / valoare. Voi pune bazele lucrarilor facute de Simon Steinberger pentru asta.

In primul rand, vom crea un set de variabile serializate ca un sir gol.

// Serializati datele formularului intr-un sir de interogare // Forked si modificate de la https://stackoverflow.com/a/30153391/1293256 var serialize = function (form) {// Configurati datele noastre serializate var serialized = ”; };

Acum, sa apucam toate campurile din formularul nostru folosind form.elements si buclati-le prin ele.

Daca campul nu are un nume, este o trimitere sau buton, este dezactivat, sau un fisier sau resetarea intrarii, il vom omite.

Daca nu este o caseta de selectare sau radio (un catchall frumos pentru selectare, textarea si diferitele tipuri de intrare) sau este si este bifat, il vom converti intr-o pereche cheie / valoare, vom adauga un & la inceput si vom adauga acesta la sirul nostru serializat. De asemenea, ne vom asigura ca codificam cheia si valoarea pentru utilizare intr-o adresa URL.

In cele din urma, vom returna sirul serializat.

// Serializati datele formularului intr-un sir de interogare // Forked si modificate de la https://stackoverflow.com/a/30153391/1293256 var serialize = function (formular) {// Configurati datele noastre serializate var serialized = ”; // Buclati fiecare camp in formularul pentru (i = 0; i <form.elements.length; i ++) {var camp = form.elements [i]; // Nu serializati campurile fara nume, trimiteri, butoane, fisiere si resetari intrari si campuri dezactivate daca (! Field.name || field.disabled || field.type === ‘file’ || field.type === ‘reset’ || field.type === ‘trimite’ || field.type === ‘buton’) continua; // Convertiti datele campului intr-un sir de interogare daca ((camp.type! == ‘caseta de control’ && field.type! == ‘radio’) || field.checked) {serialized + = ‘&’ + encodeURIComponent (camp. nume) + “

A se vedea Validarea formularului de stilou: MailChimp cu Ajax Send – Serialized Data Form by Chris Ferdinandi (@cferdinandi) pe CodePen.

Acum ca avem datele formularelor noastre in serie, le putem adauga la adresa URL.

Adaugarea unui callback

O parte cheie a modului in care functioneaza JSONP este apelul invers.

Cererile traditionale Ajax va returneaza datele inapoi. JSONP trece in schimb datele intr-o functie de apelare inversa. Aceasta functie trebuie sa fie globala (ca si in, atasata la fereastra si nu in interiorul altei functii).

Sa cream o functie de apelare inversa si sa inregistram datele returnate in consola, astfel incat sa putem vedea ce trimite MailChimp inapoi.

// Afiseaza starea formularului var displayMailChimpStatus = functie (date) {console.log (date); };

Acum putem adauga acest apel invers la adresa URL. Majoritatea JSONP folosesc callback ca cheie de interogare pentru asta, dar MailChimp foloseste c.

Injectandu-ne scriptul in DOM

Acum suntem gata sa ne injectam scriptul in DOM. In primul rand, vom crea un element de script nou si vom atribui adresa URL, deoarece este src.

// Trimiteti formularul var submitMailChimpForm = functie (formular) {// Obtineti adresa URL de trimitere ur ur = form.getAttribute (‘actiune’); url = url.replace (‘/ post? u =’, ‘/ post-json? u =’); url + = serialize (formular) + ‘& c = displayMailChimpStatus’; // Creati script cu url si callback (daca este specificat) var script = window.document.createElement (‘script’); script.src = url; };

In continuare, vom apuca primul element <script> pe care il gasim in DOM si il vom injecta pe noul nostru chiar inainte de a folosi metoda insertBefore ().

// Trimiteti formularul var submitMailChimpForm = function (form) {// Obtineti adresa URL de trimitere ur ur = form.getAttribute (‘actiune’); url = url.replace (‘/ post? u =’, ‘/ post-json? u =’); url + = serialize (formular) + ‘& c = displayMailChimpStatus’; // Creati script cu url si callback (daca este specificat) var script = window.document.createElement (‘script’); script.src = url; // Introduceti eticheta script in DOM (anexeaza <head>) var ref = window.document.getElementsByTagName (‘script’) [0]; ref.parentNode.insertBefore (script, ref); };

In cele din urma, il vom elimina din DOM dupa ce scriptul nostru se incarca cu succes.

Procesarea raspunsului de trimitere

In acest moment, metoda noastra de apelare este doar inregistrarea in ceea ce raspunde MailChimp in consola.

// Afiseaza starea formularului var displayMailChimpStatus = functie (date) {console.log (date); };

Daca te uiti la datele returnate, este un obiect JSON cu doua taste: rezultat si msg. Valoarea rezultatului este fie eroare, fie succes, iar valoarea msg este un sir scurt care explica rezultatul.

{msg: ‘[e-mailul protejat] este deja abonat la lista Banane sunt nemaipomenite. Faceti clic aici pentru a va actualiza profilul.

‘ rezultat: ‘eroare’} // Sau … {msg: ‘Aproape terminat … Trebuie sa confirmam adresa de e-mail. Pentru a finaliza procesul de abonare, va rugam sa faceti clic pe linkul din e-mailul pe care tocmai v-am trimis-o. ” rezultat: ‘succes’}

Consultati Validarea formularului de stilou: MailChimp cu Ajax Send – Rezultat de Chris Ferdinandi (@cferdinandi) pe CodePen.

Ar trebui sa verificam pentru a ne asigura ca datele returnate au ambele chei. In caz contrar, vom arunca o eroare JavaScript atunci cand vom merge sa le utilizam.

// Afiseaza starea formularului var displayMailChimpStatus = functie (date) {// Asigurati-va ca datele sunt in formatul corect daca (! Data.result ||! Data.msg) returneaza; };

Afisati un mesaj de stare

Sa adaugam un <div> in formularul nostru, chiar inainte de butonul de trimitere, pe care il vom folosi pentru a adauga mesajul nostru de eroare sau de succes. Ii vom da o clasa de .mc-status.

In functia noastra DisplayMailChimpStatus (), dorim sa gasim containerul .mc status si sa adaugam msg-ul la acesta.

Putem sa stilam diferit mesajul in functie de daca trimiterea a avut succes sau nu.

Avem deja unele stiluri configurate pentru mesajele noastre de eroare cu .error-message, deci sa le reutilizam. Vom crea o noua clasa, .success-message, pentru trimiteri de succes.

.success-message {color: green; font-style: italic; margine-jos: 1em; }

Acum, putem adauga conditionat una dintre clasele noastre (si o putem elimina pe cealalta) pe baza rezultatului.

// Afiseaza starea formularului var displayMailChimpStatus = functie (date) {// Obtineti zona de continut a mesajului de stare var mcStatus = document.querySelector (‘. Mc-status’); daca (! mcStatus) se intoarce; // Actualizati-ne mesajul de stare mcStatus.innerHTML = data.msg; // Daca eroare, adaugati clasa de eroare daca (data.result === ‘eroare’) {mcStatus.classList.remove (‘mesaj de succes’); mcStatus.classList.add ( ‘-mesaj de eroare’); intoarcere; } // In caz contrar, adaugati clasa de succes mcStatus.classList.remove (‘mesaj de eroare’); mcStatus.classList.add ( ‘-mesaj de succes’); };

Consultati Validarea formularului de stilou: MailChimp cu Ajax Trimis de Chris Ferdinandi (@cferdinandi) pe CodePen.

O imbunatatire importanta a accesibilitatii

In timp ce mesajul nostru va fi usor observat de utilizatorii vizionati, este posibil ca persoanele care folosesc tehnologie asistativa, precum cititorii de ecran, sa nu stie in mod inerent ca un mesaj a fost adaugat la DOM.

Vom folosi JavaScript pentru a pune accentul pe mesajul nostru. Pentru a face acest lucru, va trebui, de asemenea, sa adaugam un tabindex de -1, deoarece elementele <div> nu sunt focalizate in mod natural.

// Afiseaza starea formularului var displayMailChimpStatus = functie (date) {// Obtineti zona de continut a mesajului de stare var mcStatus = document.querySelector (‘. Mc-status’); daca (! mcStatus) se intoarce; // Actualizati-ne mesajul de stare mcStatus.innerHTML = data.msg; // Aduceti mesajul nostru de stare in focus mcStatus.addAttribute (‘tabindex’, ‘-1’); mcStatus.focus (); // Daca eroare, adaugati clasa de eroare daca (data.result === ‘eroare’) {mcStatus.classList.remove (‘mesaj de succes’); mcStatus.classList.add ( ‘-mesaj de eroare’); intoarcere; } // In caz contrar, adaugati clasa de succes mcStatus.classList.remove (‘mesaj de eroare’); mcStatus.classList.add ( ‘-mesaj de succes’); };

Exista sanse mari sa adauge un contur albastru la mesajul nostru de stare. Aceasta este o caracteristica de accesibilitate cu adevarat importanta pentru link-uri, butoane si alte domenii de continut concentrate in mod natural, dar nu este necesara pentru mesajul nostru. Il putem elimina cu putin CSS.

.mc-status: focus {contur: nici unul; }

Rezultatul final

Avem acum un script usor, fara dependenta, care valideaza formularul nostru MailChimp si il trimite asincron.

Scenariul nostru completat cantareste nemminificat. Cand este minificat, scriptul cantareste doar 9kb. Este cu 15,5 × mai mic decat versiunea oferita de MailChimp.

Nu-i rau!

Validarea formularului – Partea 4: Validarea formularului de abonare MailChimp | CSS-trucuri

O forma simpla cu o amprenta mare

Indepartarea balonului

Adaugarea validarii constrangerilor

Imbunatatirea cu API-ul de validare a constrangerilor

Trimiterea formularului cu Ajax

Folosind JSONP

Configurarea adresei URL de trimitere

Serializarea datelor formularului nostru

Adaugarea unui callback

Injectandu-ne scriptul in DOM

Procesarea raspunsului de trimitere

Afisati un mesaj de stare

O imbunatatire importanta a accesibilitatii

Rezultatul final

Populare

Afla cum iti poti lansa o mica afacere folosind un spatiu...

Top 10 cele mai supraevaluate filme din toate timpurile

10 regizori care au facut un film de groaza si au...

10 documentare care au schimbat perceptia publicului

Top 10 interviuri controversate cu celebritati din toate timpurile

Top 10 cele mai memorabile momente ale premiilor Oscar

Cum se schimba viata atunci cand intri in cercurile sociale ale...

10 povesti ciudate din lumea rap pe care sa le cunosti

10 secrete intunecate din lumea surprinzator de rasucita a K-Pop

10 melodii rock inspirate de evenimente groaznice