Kuthibitisha sehemu za fomu kabla ya kuwasilisha katika JavaScript. Uthibitishaji wa fomu ya Ajax kabla ya kuwasilisha kama

Sote tumejaza fomu wakati fulani. Wengine hata walichakata matokeo waliyokusanya, iwe ni maagizo yaliyowekwa kwenye duka la mtandaoni au huduma ya kurejesha. Tunapomwomba mtumiaji ajaze maelezo fulani, tunataka yalingane na umbizo fulani, hasa ikiwa yatachakatwa baadaye na CMS kama vile 1C bitrix, WorldPress, na kadhalika. Baada ya yote, ikiwa kwa sababu fulani mtumiaji anaandika kuingia kwake kwa Skype kwenye safu ya simu, hitilafu ya usindikaji wa data inaweza kutokea: haitarekodiwa, na mtumiaji atatupwa nyuma kwenye ukurasa ili kujaza fomu. Kwa hiyo, swali linatokea jinsi ya kuangalia data iliyoingia mtandaoni na kuzuia kutuma data isiyo sahihi.

Kazi ya suluhisho iliyoelezwa, iliyoandaliwa na sisi, inaweza kutathminiwa mara moja kwa kutumia mfano wa utaratibu wa kuagiza kwenye tovuti ya Newcom. Hapo chini tutaanza hadithi kuhusu mchakato wa maendeleo yake, na pia kutoa mifano michache zaidi.

Uundaji wa shida

Kufanya ukaguzi rahisi wa javascript wa sehemu za fomu kabla ya kuituma kwa seva huchukua dakika chache. Ni wakati tu unapoandika jambo hili rahisi kwa mara ya kumi kwa tovuti moja tu, bila hiari yako unafikiria juu ya kufanya mchakato huu kiotomatiki. Wakati fulani, mawazo juu ya hili yalizidi sana hivi kwamba nililazimika kuketi na kuunda maktaba ndogo ambayo ilishughulikia shamba.

Ukivunja shida kuwa vizuizi, unapata kitu kama mchoro ufuatao:

Naam, ikiwa kuna mpango, basi tuitekeleze.

Uchambuzi wa chaguzi za ukaguzi.

Ni nyanja gani zinazojulikana zaidi kwenye fomu?

  • Ingizo za maandishi, ambazo, kama sheria, huangaliwa kwa ukamilifu, au kwa maneno rahisi ya kawaida kama barua pepe au simu.
  • Visanduku vya kuteua vilivyoangaliwa kwa uwepo wa alama (kama makubaliano ya uchakataji wa data ya kibinafsi).
  • Tunaweza pia kutaja orodha kunjuzi ambazo zimeangaliwa kwa thamani fulani isiyo tupu.
  • Usisahau kuhusu vifungo vya redio vya siri. Kwa nini ujinga? Kuna mapungufu katika kuangalia alama.
Bila shaka, uwanja unaweza kuwa wa lazima au wa hiari. Hali inawezekana wakati uwanja ni wa hiari, lakini kwa kuwa unaijaza, usifanye hivyo, lakini kulingana na sheria fulani.

Kwa kuwa tumejipanga kuandika maandishi zaidi au chini ya ulimwengu wote, tunahitaji kufikiria juu ya miundo iliyopotoka isiyo ya kawaida, ambayo itaitwa "vikundi" katika siku zijazo. Kwa neno hili tunamaanisha mashamba yaliyounganishwa kwa kila mmoja. Kwa mfano, ikiwa mtumiaji amechagua kisanduku cha kuteua cha "Tuma habari kwa barua pepe", kipengee cha "barua pepe" kinakuwa cha lazima kujaza, au mara nyingi wanapenda kugawa nambari ya simu kuwa msimbo na nambari yenyewe - basi usahihi. lazima iangaliwe katika nyanja zote, na kutokuwa sahihi kwa moja kunajumuisha makosa katika zote mbili. Na ujumbe wa makosa haupaswi kuonyeshwa kwa nyanja zote za kikundi, lakini kwa moja tu, vinginevyo idadi yao itaanza kuangaza macho yako.

Ni hitimisho gani linaweza kutolewa?
Inahitajika kupanga ukaguzi wa mara kwa mara wa sehemu ya maandishi, hundi ya barua pepe na sehemu za "digital" kama vile nambari ya simu, umri, n.k. Vikasha vya kuteua na vitufe vya redio vinaangaliwa na mali iliyoangaliwa, orodha kunjuzi huangaliwa kwa thamani. Ili kukidhi vikundi vya ujanja, waandikie kidhibiti pia. Kwa kuongeza, toa uwezo wa kuangalia baadhi ya sehemu na utendakazi fulani maalum kwa matukio ya kutatanisha.

Kuandaa uhifadhi wa habari kuhusu sehemu zinazoangaliwa na aina za uthibitishaji. Wacha tuseme tunahitaji kuangalia ingizo lifuatalo kwa barua pepe:

Kwa maoni yangu, kuna chaguzi mbili tu za uhifadhi hapa:

  • Tunaunda kitu cha javascript ambacho tunahifadhi sehemu zinazohitajika kwa uthibitishaji.
  • Tunaingiza maelezo kuhusu hundi moja kwa moja kwenye lebo za sehemu.
  • Kitu cha JS kitafanya kazi haraka na kitaonekana kuwa sahihi zaidi kuliko sifa zingine zisizo za kawaida kwenye lebo. Wacha tuseme itaonekana kama hii:

    Var checkThis=( kishiko: "$("")", // pointer kwa sehemu inayoangaliwa aina: "barua pepe", // aina ya angalia: kawaida, barua pepe, kichwa cha nambari: "ingiza barua pepe yako hapa, kwa mfano", // dokezo kuhusu nesess makosa: kweli,//required bendera kundi: uongo,//kikundi pointer); var AllChecks=;//na hii ni safu ambapo vitu vyote vilivyoangaliwa vitahifadhiwa

    Ikiwa programu inafika kwenye tovuti wakati tayari imewekwa kabisa (hiyo ni, hatua hufanyika katika riwaya ya kisayansi) - njia hii ni bora. Lakini mara nyingi kitu kitahitaji kukamilishwa, pamoja na kuongeza uwanja wa ziada au kuunda fomu mpya, na kuacha nyongeza ya washughulikiaji wa shamba kwa dhamiri ya wabuni wa mpangilio, hata ikiwa una mjenzi aliyeandikwa, inamaanisha kujitolea kwa maombi ya mara kwa mara kutoka kwao. kwa mtindo wa "a" Kila kitu kimevunjwa hapa." Na kisha itabidi usahau kuhusu postulate kuu ya wazo, automatisering (vizuri, kwa usahihi, kujiondoa mwenyewe, mpendwa wako, harakati zisizo za lazima za mwili).

    Kisha unaweza kujaribu kuingiza data ya uthibitishaji katika sifa zisizo za kawaida, kugeuza laconic

    ndani ya monster kubwa kama Tutazingatia chaguo hili. Sisi ni kwa versatility.

    Kisha tunaingiza vitambulisho vifuatavyo vilivyochakatwa:

    kichwaNi, kwa kweli, kiwango, lakini hapa tutaandika ujumbe kuhusu kujaza vibaya kwa shamba. Na tutaionyesha kwa mtindo "Taja" + kichwa
    cfm_angaliaAlama ya uthibitishaji ndiyo tutakayotumia kutafuta sehemu zinazoangaliwa. Na inaweza kuchukua maadili yafuatayo:
    • Y inamaanisha unahitaji kuangalia
    • barua pepe au nambari - inaonyesha hundi ya kawaida ya barua pepe au nambari / simu ikiwa imejaa
    • Y_email / Y_num - uthibitishaji wa lazima kwa barua pepe au nambari
    • groupID(Y) - kuambatanisha kipengee katika kikundi kilicho na kitambulisho cha kikundi na vigezo vya uthibitishaji vilivyoainishwa kwenye mabano
    cfm_confirminfoKwa chaguo-msingi, makosa yataonyeshwa mara moja baada ya kipengele kukaguliwa, ambayo si rahisi kila wakati. Kwa hivyo wacha tuonyeshe katika sifa hii kichaguzi cha jq kwa kitu ambacho baada ya hapo kosa litaonyeshwa.
    Kwa mfano, cfm_confirminfo=’#placeForErrors’
    cfm_kaziIli sio kutatanisha cfm_check iliyojaa, hapa tutaandika jina la utendakazi wa kukagua uga usio wa kawaida.
    Hati ya kuangalia sehemu imekamilika.

    Tumepokea taarifa, kilichobaki ni kuzifanyia kazi. Algorithm hapa sio ngumu:

    • Kwa pembejeo tunatoa pointer kwa fomu ya kufanya hundi (tunaweza kuwa na fomu nyingi kwenye ukurasa!);
    • tunapitia vipengele vya fomu maalum, kuangalia kwamba zimejazwa kwa usahihi;
    • ikiwa kuna makosa, tunayaweka alama;

    Labda ni wakati wa kutoa msimbo wa js ambao unatekelezea utendakazi angalau kwa sehemu, kwani rundo kama hilo la maandishi tayari limeandikwa?

    Ikiwa(typeof cFM_classError === "undefined")//hapa tunaandika darasa la css lililopewa sehemu zisizo sahihi var cFM_classError="cFM_wrong"; kazi cFM_checktrueAttr(mzazi)//hutayarisha data kwa ajili ya kuchakata //(mzazi ni jq-pointer kwa fomu, au kizuizi cha kuchanganya) ( var error=true; //safisha baada ya kazi iliyoitwa awali $("div." +cFM_classError).ondoa ();//ondoa vidokezo $("."+cFM_classError).kila(function())(//ondoa hitilafu inayoangazia $(this).removeClass(cFM_classError); )); sehemu za kuangalia var inputsToHandle=false ; if(typeof parent !== "undefined") inputsToHandle=parent.find(""); angalia kila kitu //nyakua vipengele vilivyopatikana na uviangalie inputsToHandle.each(function())( if(error) error=cFM_prepareChecking(hii);//angalia vitu, tafuta angalau kosa moja cFM_prepareChecking(hii); )); kosa la kurudisha;//rejesha kweli ikiwa vipengele vyote vimepitisha hitilafu, na sivyo ikiwa mtu ameshindwa) chaguo la kukokotoa cFM_prepareChecking(handle)// inaanza kuangalia kipengele mahususi na kuwekea alama zenye makosa ( var error=true;/*return value; maana ni tu kuonyesha kwamba kuna makosa inachukua thamani: kweli - hakuna makosa; uwongo - uwanja haujajazwa; "sio sahihi" - sehemu imejazwa kimakosa;*/ //amua saini ya uga ikiwa hitilafu imegunduliwa ndani yake. Kwa chaguo-msingi, //"Bainisha thamani ya sehemu" itaonyeshwa ikiwa kichwa hakijabainishwa var title = " thamani ya sehemu"; if(typeof $(handle).attr("title") !== "undefined" && $(handle).attr("title").length>0) title=$(handle).attr("title"); var after = handle;//куда лепить сообщение об ошибке var attribute = $(handle).attr("cFM_check");//значение великого атрибута cFM_check //а не задали ли какую хитрую функцию для проверки поля? if(typeof $(handle).attr("cFM_function") !== "undefined") var chkFunk=$(handle).attr("cFM_function"); //наконец, проверяем поле if(typeof chkFunk !== "undefined") error=window($(handle)); else error=cFM_checkFullness(handle); //коль ошибка закралась к нам if(error!==true) { //определяем, куда лепим сообщение об ошибке if(typeof $(handle).attr("cFM_confirmInfo") !== "undefined") { after=$(handle).attr("cFM_confirmInfo"); if(after.indexOf("self")===0)//если вдруг селфы непойми зачем прилепили after=after.substr(4); } if(error==="wrong")//коль поле заполнено неправильно $(after).after("!}

    Thamani ya uga si sahihi

    "); lingine( if(error===false)//if $(after).after("

    Bainisha "+kichwa+"

    ");//html hitilafu nyingine//kama hundi maalum yenye html maalum $(after).after(""); ) $(handle).addClass(cFM_classError);//kuongeza darasa la makosa if($(handle) . attr("aina")=="redio") // rekebisha vibonye vya redio $("").addClass(cFM_classError) chaguo la kukokotoa cFM_checkFullness(handle) // na hii ndiyo chaguo la kukokotoa la kawaida (cFM_classError); var error = kweli; //soma data kutoka sifa var sifa = $(handle).attr("cFM_check"); //required bendera var required = kweli; ) required=false; //angalia umbizo var format=attribute if(required) format=attribute.substr(2); kipengele ni kama hiki ( kisa "kisanduku cha kuteua": if(!$(handle).prop("checked")) error=false; break; kisa "redio"://promised tatizo la redio if(!$(handle). prop( "checked") && $(":checked").length==0) error=false; .val().trim().length==0 || $(handle).val()=="0") && required) error=false; lingine ( if(format==="num”)//angalia namba ( var regCheck = new RegExp("[^0-9\s-]+"); if(regCheck.test($(handle).val) ())) error="wrong"; ) if(format==="email")//angalia barua pepe ( var regCheck = new RegExp("^(+[-._+&])+@ ​​([ -0-9a-zA-Z]+[.])+(2,6)$"); if(!regCheck.test($(handle).val())) error="wrong"; ) ) mapumziko ; ) kosa la kurudi; )

    Kwa mfano, tutatoa kazi maalum ya kuangalia, kwa mfano, kuangalia uwepo wa maneno mawili kwenye pembejeo (Jina la Kwanza, Jina la Mwisho au Jina la Kwanza, Jina la Mwisho). Ingizo ambalo huanzisha hundi ya chaguo za kukokotoa hutekelezwa kama ifuatavyo:

    Na kipengele cha kuteua kitaonekana, kwa mfano, kama hii: checkName(shiko) ( var handleValue=handle.val().trim(); //kama inavyoonyesha mazoezi, watumiaji hufanya chochote kutenganisha jina lao la kwanza kutoka kwa jina lao la mwisho. if(handleValue.indexOf( " ")!==-1 || handleValue.indexOf(",")!==-1 || handleValue.indexOf(".")!==-1) rudisha kweli; uongo; Tunapaswa kuweka baadhi ya hundi zetu: div.cFM_wrong ( color:red; font-size:10px; position:absolute; width:140px; ) input.cFM_wrong( background: #ffd9d9; mpaka-color:#d3adad; ) Uthibitishaji wa fomu ya hati.

    Sasa, ikiwa kazi ya cFM_checkFullness() itakamilika kwa mafanikio (yaani, inarudi kweli), hati inapaswa kutuma fomu kwa kuchakatwa. Jinsi ya kutekeleza hii inategemea fomu maalum. Ikiwa uthibitisho wa uwasilishaji unakuja kupitia kitufe cha kuwasilisha, basi unaweza kujiandikisha kwa tukio la uwasilishaji wa fomu (onsubmit) na, kulingana na matokeo ya hundi, itume au la. Kwa mfano, kama hii:

    na hapa, kama, kundi la vitambulisho vya fomu Ikiwa utumaji unafanywa kwa kutumia ajax, basi kila kitu ni rahisi: piga simu kulingana na matokeo ya kazi cFM_checktrueAttr($(hii));

    Katika nambari iliyo hapo juu hakuna hundi ya vikundi (kwa sababu ugumu wa nambari huongezeka sana, na saizi ya upau wa kusogeza wa kifungu hiki labda iliwatisha wageni wengi). Tofauti katika algorithm haitakuwa na maana: vipengele vya kuangalia kwa kikundi vinapaswa kuzinduliwa katika kizuizi tofauti, na kulingana na uendeshaji wa block nzima, ujumbe wa kosa utaonyeshwa katika kipengele maalum.
    Ni kweli, katika hatua hii inafaa kupunguza kasi na kufikiria: ni kweli ni muhimu kurekebisha msimbo ili kusaidia vikundi, au tunaweza kujiwekea kikomo cha kuandika kazi tofauti ya uthibitishaji kwa nyuga kadhaa ngumu?

    Tuna nini mwisho? Kwa kuunganisha faili kadhaa (.js na .css), tunapata utendaji wa ukaguzi wa mali ambao unaweza kutupa kwenye tovuti zozote kwa amani ya akili, mradi jQuery imeunganishwa. Baada ya yote, ni vyema zaidi kuwa na seti ya zana zilizopangwa tayari kuliko kutumia muda mwingi kuzizalisha kabla ya kila kazi ya aina moja.

    Uunganisho na mifano

    Kwanza, tunahitaji maktaba ya jQuery. Unaweza kuipakua, kwa mfano, kutoka kwa tovuti rasmi.
    Au ingiza tu mstari kwenye kichwa (kilicho ndani ya lebo) ya tovuti yako

    Kisha pakua (bofya kulia -> kipengee unachopenda na neno "hifadhi") kutoka hapa faili iliyo na msimbo wa js na, ikiwa ni lazima, faili yenye mitindo ya css kwa sehemu zenye makosa kutoka hapa.
    Tunawaongeza kwenye kichwa pia: Sasa unahitaji kupanga sifa za mashamba ya fomu kulingana na, kulingana na aina gani ya hundi unayotaka kufanya.
    Mguso wa mwisho ni kuongeza lebo ya tukio la onsubmit: "onsubmit="return cFM_checktrueAttr($(this));"".

    Hebu sasa jaribu kutekeleza hundi ya fomu hiyo rahisi.

    Mafunzo haya yanafafanua jinsi ya kuunda fomu ya JavaScript ambayo hukagua kama mgeni amejaza sehemu ipasavyo kabla ya kutuma data kwa seva. Tutaelezea kwanza kwa nini uthibitishaji wa fomu ni mbinu muhimu, na kisha tutaunda mfano rahisi unaoelezea jinsi inavyofanya kazi.

    Kwa nini ninahitaji kuangalia kukamilika kwa fomu?

    Uthibitishaji wa fomu ni mchakato ambao data ya fomu inathibitishwa kabla ya kuchakatwa. Kwa mfano, ikiwa fomu yako ina sehemu ambayo mtumiaji lazima aweke anwani ya barua pepe, unaweza kutaka kuangalia kama sehemu hiyo imekamilika kabla ya kuchakata fomu zaidi.

    Kuna njia mbili kuu za kuangalia kukamilika kwa fomu: kwa upande wa seva (kwa kutumia maandishi ya CGI, ASP, nk) na kwa upande wa mteja (kwa kawaida hutumia JavaScript). Uthibitishaji wa upande wa seva ni salama zaidi, lakini katika hali nyingi unahitaji msimbo ngumu zaidi, wakati uthibitishaji wa upande wa mteja ni rahisi na wa haraka (kivinjari hakihitaji kuunganishwa na seva ili kuthibitisha fomu, kwa hivyo mtumiaji hupokea jibu mara moja ikiwa kukosa sehemu zinazohitaji kujazwa).

    Uthibitishaji wa fomu ya upande wa mteja. Hutekelezwa kwa kutumia hati iliyopachikwa ya JavaScript.

    Uthibitishaji wa fomu ya upande wa seva. Kawaida hufanywa kwa kutumia hati ya CGI au ASP.

    Katika somo hili tutaunda fomu rahisi yenye uthibitishaji wa upande wa mteja kwa kutumia JavaScript. Kisha unaweza kuirekebisha ili kuendana na mahitaji yako.

    Fomu rahisi iliyo na uthibitishaji.

    Wacha tujenge fomu rahisi kwa kukagua kujaza kwa kutumia hati. Fomu hii ina sehemu moja ya maandishi "Jina lako" na kitufe cha kuwasilisha data. Hati yetu hukagua ikiwa mtumiaji ameingiza jina lake kabla ya kutuma data kwa seva.

    Fungua fomu na uone ikiwa inafanya kazi. Jaribu kubofya kitufe cha "Wasilisha Data" bila kuingiza chochote katika sehemu ya "Jina lako".

    Ukurasa una kazi ya JavaScript inayoitwa validate_form(). Inaangalia ikiwa fomu imekamilika. tuangalie sura kwanza.

    Fomu

    Sehemu ya kwanza ya fomu ni lebo ya fomu

    Fomu inaitwa contact_form. Kwa msaada wake, tutafikia fomu kutoka kwa kazi ya uthibitishaji wa JavaScript.

    Fomu hutumia njia ya posta kutuma data kwa faili ya stub htm, ambayo inaonyesha ujumbe tu. Kwa kweli, unaweza kutuma data kwa hati yako ya CGI, ukurasa wa ASP, n.k. (kwa mfano kutuma barua).

    Lebo ya fomu pia ina sifa ya kutowasilisha ili kuita kitendakazi cha uthibitishaji wa JavaScript validate_form() wakati kitufe cha Wasilisha Data kinapobofya. Chaguo za kukokotoa hurejesha thamani ya Boolean, ambayo ndiyo maana yake "hundi imefaulu" na njia za uongo "data imesimamishwa." Kwa njia hii tunaweza kuzuia data ya fomu isiwasilishwe ikiwa mtumiaji hajaijaza ipasavyo.

    Msimbo uliosalia wa fomu huongeza sehemu ya ingizo ya contact_name na kitufe cha "Wasilisha data":

    Tafadhali weka jina lako.

    Jina lako:

    validate_form() kitendakazi

    Kazi ya uthibitishaji wa fomu validate_form() imejengwa kwenye sehemu ya kichwa mwanzoni mwa ukurasa:

    Mstari wa kwanza () huambia kivinjari kwamba kinachofuata ni nambari ya JavaScript, na maoni ya HTML (
    Sasa mtihani wetu uko tayari. Sasa, baada ya data yote kuingizwa, tunatuma fomu yetu kwetu kwa barua pepe.
    Tunaandika msimbo wa php katika faili ya index.php:

    Katika makala hii tutaanza kukabiliana na scripts ngumu zaidi na kazi kamili. Wacha tupitie hatua zote hatua kwa hatua - kuanzia na kuweka shida na kumalizia na hati ya ulimwengu wote, tayari kutumika. Na wacha tuanze kwa kuhalalisha fomu kabla ya kuituma kwa seva.
    Mazingatio ya jumla na msimbo wa html wa fomu

    Uthibitishaji wa fomu labda ni mojawapo ya vipengele vinavyotumiwa sana. Ni tovuti adimu isiyo na tofauti yoyote, iwe ni utumaji rahisi wa ujumbe kwa barua-pepe au fomu changamano ya kuagiza katika duka la mtandaoni. Faida ya hati ni dhahiri - kuangalia kwamba mtumiaji amejaza sehemu zote zinazohitajika kabla ya kutuma na hivyo kuepuka tatizo la kupokea barua tupu au ukosefu wa maelezo ya mawasiliano ya mtumaji.

    Wacha tuchukue kuwa tayari tunayo fomu na ina sehemu 4 zifuatazo: jina, anwani ya barua pepe, somo la ujumbe na ujumbe wenyewe. Nambari inayolingana ya html ya fomu kama hii ingeonekana kama hii:


    < form action = "/cgi-bin/formmail.cgi" onsubmit = "return sendform();" >

    Jina lako : *< input type = "text" name = "name" >< br >
    Barua pepe: *< input type = "text" name = "email" >< br >
    Mada ya ujumbe:< input type = "text" name = "subject" >< br >
    Ujumbe:< textarea name = "message" >< br >< br >

    < input type = "submit" value = "Tuma" >
    < input type = "reset" value = "Wazi" >


    * - sehemu zinazohitajika ili kujaza

    Kumbuka kuwa, tofauti na fomu ya kawaida, tunafuatilia tukio la kuwasilisha moja kwa moja kwenye lebo na linapotokea, tunaita kipengele cha uthibitishaji wa fomu ya sendform().

    Kwa nini njia hii ya kuita kitendakazi ilichaguliwa? Baada ya yote, iliwezekana kuomba, kwa mfano, tukio la kubofya? Jibu ni rahisi - unapotumia tukio la kubofya, kitufe cha "wasilisha" kitalazimika kubadilishwa na kifungo cha kawaida. Na, ikiwa usaidizi wa javascript umezimwa kwenye kivinjari, hatutaweza kuwasilisha fomu (!). Kufuatilia tukio la kuwasilisha hakuna shida hii, kwa sababu hata ikiwa usaidizi wa hati umezimwa, fomu itawasilishwa.

    Ukiangalia kwa karibu msimbo wa html wa fomu yetu, utaona kwamba niliweka nyota karibu na sehemu hizi, na kuweka tanbihi mwishoni mwa fomu. Hii ilifanyika, bila shaka, kwa urahisi na heshima ya msingi kwa mtumiaji.

    Kazi ya kuthibitisha fomu kabla ya kuwasilisha

    Sasa hebu tuendelee kwenye jambo kuu - kuandika kazi ambayo itaangalia moja kwa moja fomu. Wacha tufikirie kile tunachohitaji kutoka kwake? Naam, kwanza, angalia kwamba mashamba yanayotakiwa yanajazwa, na pili, tuma fomu. Ikiwa sehemu kadhaa zinazohitajika ni tupu, tunahitaji kutoa ujumbe kuhusu hili kwa mtumiaji na kuhamisha kishale kwenye kipengele kinacholingana.

    Kwanza, hebu tuandike kifungo cha jumla cha chaguo la kukokotoa:


    < script language = "javascript" >


    Mbinu tuliyotumia kuita chaguo za kukokotoa kupitia tukio la kuwasilisha inahitaji kurejeshwa kwa mojawapo ya thamani za kimantiki: kweli au si kweli kama matokeo ya chaguo hili la kukokotoa. Na, kulingana na thamani hii, fomu itawasilishwa au la.

    Sasa hebu tujaribu kuandika kitendakazi cha uthibitishaji kilichounganishwa na fomu hii mahususi. Kama unavyokumbuka, tuna sehemu mbili tu zinazohitajika kujaza: jina la mgeni na anwani yake ya barua pepe. Jambo rahisi zaidi ni kuangalia yaliyomo katika kila moja ya uwanja unaohitajika kwa kutokuwepo kwa maandishi:


    < script language = "javascript" >


    Kama unaweza kuona, kazi ya uthibitishaji ina vizuizi viwili vinavyofanana, vinavyotofautiana tu kwa jina la uwanja unaoangaliwa. Wacha tutoe maoni kwa kila mstari katika vizuizi hivi:

    Kwanza tunaangalia kuwa uwanja huu hauna kitu. Na kama hii ni hivyo, basi
    onyesha ujumbe wa makosa kwa kutumia kitendakazi cha tahadhari () kilichojengwa. Baada ya mtumiaji kufunga dirisha, sisi
    Wacha tutumie njia ya kuzingatia() na tuhamishe kishale kwenye uwanja wenye makosa. Na hatimaye
    Wacha tuondoe chaguo la kukokotoa kwa kuweka bendera ya mafanikio kuwa ya uwongo.
    Ikiwa uwanja unaoangaliwa haukuwa tupu, basi kizuizi kinacholingana kinarukwa tu. Ikiwa vizuizi vyote vya hundi vimerukwa, kazi inarudi kuwa kweli kama matokeo, ambayo inaonyesha hundi iliyofanikiwa.

    Kitendaji cha uthibitishaji kwa wote

    Ikiwa tunahitaji kuangalia sehemu mbili au tatu tu, basi bado tunaweza kuvumilia njia hii ya kuangalia "moja kwa moja", lakini vipi ikiwa kuna kadhaa kati yao? Lakini hii sio kawaida - haswa katika dodoso ngumu. Kwa hivyo, tunarekebisha kazi yetu kidogo ili isitegemee idadi ya sehemu zinazoangaliwa.

    Kwanza kabisa, tutaunda safu ambapo tutaorodhesha majina ya sehemu zote zinazohitaji uthibitishaji:

    Inahitajika = safu mpya("jina", "barua pepe");

    Mbinu hii itaturuhusu kuongeza na kurekebisha kwa urahisi orodha ya sehemu zinazohitajika bila kubadilisha moja kwa moja msimbo wa kitendakazi chenyewe.

    Mbali na safu iliyoelezwa hapo juu, tutaongeza nyingine, ambayo itakuwa na maandishi ya makosa kwa uwanja maalum:

    Required_show = safu mpya("Jina lako", "barua pepe");

    Hili litaturuhusu kubadilisha maandishi kuhusu makosa kwa hiari na kutumia lugha ya Kirusi kwa usahihi, na tusiridhike na vishazi visivyoweza kugawanywa kama vile "jina halijaingizwa."

    Kuwa na safu ya sehemu zinazohitajika, ukaguzi mzima unaweza kufanywa kwa kitanzi. Hivi ndivyo kazi ya kuangalia iliyorekebishwa ingeonekana kama:


    < script language = "javascript" >


    Katika kitanzi, sehemu zote za fomu zinaangaliwa ili kuona ikiwa zinalingana na "zinazohitajika". Ikiwa mechi itatokea, hundi inafanywa kwa njia ile ile kama ilivyoelezwa hapo juu, lakini kwa pango moja - kuanzishwa kwa safu na ujumbe wa makosa inahitajika marekebisho kidogo ya kazi ya tahadhari (), kwa hiyo sasa maandishi ya makosa inategemea moja kwa moja. jina la shamba.

    Hiyo ndiyo kimsingi. Chaguo hili la kukokotoa ni la ulimwengu wote na kwa marekebisho madogo (kimsingi yaliyomo katika safu mbili) yanaweza kubadilishwa kwa aina yoyote.

    Nyuma

    Mfano wa kile tunaweza kufikia unaweza kuonekana katika mfano hapa chini. Mfano huo pia unajumuisha uthibitisho wa ingizo sahihi la barua pepe. Hapo chini nitaonyesha chaguo mbili za hati zilizo na uthibitishaji wa barua pepe na bila.

    Kama unavyoona, hadi sehemu zote zijazwe, hati haitakuruhusu kuwasilisha fomu, na anwani sahihi lazima iingizwe kwenye uwanja wa barua pepe. Kwanza, nitakuonyesha jinsi ya kufanya ukaguzi rahisi ili kuhakikisha kuwa sehemu zimekamilika bila kuangalia barua pepe yako. Je, ikiwa fomu yako haina sehemu hii na unahitaji kuangalia sehemu ya maandishi ili isiwe tupu na arifa tupu zisije kwa barua pepe yako.

    Ili kutekeleza mpango wetu, tunahitaji kwanza kuunda fomu yenyewe. Huenda tayari unayo, lakini ikiwa unataka kuanzisha nyenzo hii ndani yake, utahitaji kuifanya kwa sura yako. Nitaonyesha kila kitu kwa kutumia mfano wangu mwenyewe. Fomu yangu haitatuma chochote, nakala hii haina kidhibiti cha kutuma barua, ili sio ngumu ya nyenzo. Kidhibiti cha kutuma barua pepe ni hadithi nyingine. Kwanza, msimbo wa HTML wa fomu yenyewe.

    Unaweza kuona kutoka kwa msimbo kwamba fomu yetu ina sehemu tatu - jina, barua pepe na uwanja wa majaribio. Kuna vidokezo vichache muhimu zaidi ambavyo vitahitajika kwa hali yoyote ili hati ifanye kazi kwa usahihi. Hebu tuchukue kwa utaratibu.

    • id="file_form" - Kitambulisho cha fomu yetu. Kitambulisho kinahitajika, kitatumika pia kwenye hati.
    • - block inahitajika. Hiki ni chombo cha kuonyesha ujumbe wa makosa kutoka kwa hati. Kizuizi hiki pia kinaweza kuwekwa nje ya fomu. Mpe mitindo yoyote. Katika mfano, hii ni maandishi nyekundu ambayo yanaonyesha uwanja tupu.
    • bonyeza="frmotpr();" - tukio ambalo litazindua kazi kutoka kwa hati yetu wakati kifungo kinapobofya. Tukio hili limeongezwa kwenye kitufe cha TUMA. Mstari wa mwisho katika msimbo.
    • Sehemu zote pia zimepewa vitambulisho na madarasa. Pia zitahitajika kwa hati yetu ya uthibitishaji. Kitambulisho cha uwanja wa barua pepe ni muhimu sana kwa hati yetu ya baadaye, ambayo itaangalia usahihi wa barua pepe iliyoingia.

    Sasa, ili kuipa fomu yetu mwonekano wa kawaida, hebu tuongeze baadhi ya mitindo ya CSS Ikiwa utaitumia kwenye tovuti yako, kisha iongeze kwenye faili yako ya mitindo.

    #fomu_ya_faili( upana:300px; mandharinyuma:#fff; padding:15px; ukingo:3px; -radius-ya-mpaka-webkit:25px; -radius-mpaka:25px; radius ya mpaka:25px; kivuli-sanduku:0 0 10px rgba(0,0,0,.1) mpaka:1px imara #36c .in_pl( upana:90%; pambizo-chini:15px; padding:10px 15px; mpaka-radius:25px; mpaka:hakuna; sanduku; -kivuli:0 0 5px rgba(0,0,0,.2) mandharinyuma:#fff ) .in_pl:focus( background:#fff; ) #sub_f( padding:5px 15px; mpaka:hakuna; mpaka - radius:25px kivuli:0 0 2px 1px rgba(0,0,0,.2); mandharinyuma:#36c) .fl_fr( upana:100%; saizi:15px rangi:#333 kielekezi: mpaka:hapana-chini:10px) usuli:rgba(255,0,0,.2);)

    Mitindo hii huweka vigezo vya fomu yenyewe, mashamba, na vifungo. Sitaelezea mistari yote na kila moja hufanya nini, kuna mafunzo ya CSS kwa hiyo. Nitaorodhesha mbili tu muhimu zaidi.

    • #messenger ni mitindo ya block moja yenye matokeo ya ujumbe. Kigezo kuu cha darasa hili ni kuonyesha:hakuna. Hiyo ni, sisi mwanzoni tunaficha kizuizi.
    • .sio sahihi ni mitindo ya darasa ambayo itagawiwa na hati yetu kwenye sehemu ambayo haijajazwa au kujazwa vibaya. Nitalitaja tena darasa hili hapa chini.

    Sasa kwa kuwa tuna fomu iliyotengenezwa tayari au umesanidi fomu yako kulingana na maagizo yangu, umeongeza vitambulisho kwake, yangu au yako, tukio la kuzuia na kifungo linalohitajika, tunaweza kuanza kuunganisha hati.

    Kwa kuwa hati yetu inafanya kazi kwa kutumia jQuery, maktaba ya jQuery lazima ijumuishwe. Ikiwa haijaunganishwa hapo awali, fanya hivyo kwa kuongeza mstari huu:

    Unaweza kusoma wapi na jinsi ya kuongeza maktaba kwa usahihi katika makala -.

    Baada ya maktaba, sio kabla yake, lakini baada yake, tunahitaji kuunganisha hati yetu ya uthibitishaji wa fomu iliyosubiriwa kwa muda mrefu. kama nilivyoandika hapo awali, chaguo la kwanza litakuwa hati ya kuangalia kwanza uwanja ili kukamilika, bila kuangalia usahihi wa barua pepe iliyoingia. Nakala yenyewe inaonekana kama hii: