Sjekke tomme skjemafelt: en universell metode. Skjemavalidering i JavaScript

Jeg kommer med en kryssforespørsel ajax domene til php-siden din på serveren. Jeg sender inn et skjema fra html via ajax til mitt php-siden på server. Problemer med validering på klientsiden.

Jeg vet ikke hvordan jeg skal utføre validering på klientsiden før jeg sender inn skjemaet.

HTML-skjema standardskjema, plassering av inndatafelt: fornavn, etternavn, melding.... Mitt HTML-skjema, på klientsiden:

var output = $(".nesa"); $(document).ready(function())( $("#form1").submit(function (e) ( e.preventDefault(); $.ajax(( url: "http://www.example.com / form.php", crossDomain: true, //set as a cross domain requests type: "post", data: $("#form1").serialize(), beforeSend: function())( // add spinner $ (" .spinner").append(" "); ), suksess: funksjon (data) ( $(".nesa").html(data); alert("sendt " + data); ), feil: funksjon())( output.text("Meldingen er ikke sendt!"); ) )); )); ));

Hvordan er validering? Jeg prøver å legge inn kode i sendmail, men uten hell. Eller er det mulig å bruke submitHandler?

Tanken er at når brukeren klikker på "Send"-knappen, kjører denne sjekken og hvis "lim inn adressen" mislykkes E-post" Nå når jeg klikker på send-knappen, sender du dataene til serveren. Jeg vil at de første inndatafeltene skal valideres.

Dette skjemaet er det faktiske arbeidet med å sende inn data til serveren, men trenger bare å finne ut hvordan du gjør valideringen. Hvor plasserer jeg validering i en ajax-samtale?

Takk til

5 svar

Sortering:

Aktivitet

Vennligst bekreft skjemaet før du sender inn AJAX-forespørsel. Hvis det ikke er noen feil, bør ajax-forespørselen sendes, ellers returneres falsk. Du får til dette:

$("#form1").submit(function (e) ( e.preventDefault(); // Få påloggingsnavn-verdien og trim den var name = $.trim($("#name").val()) ; // Sjekk om det er tomt eller ikke hvis (navn === "") ( alert("Tekst-feltet er tomt."); return false; ) ));

Du kan også gjøre en OnKeyUp-funksjon.

For det første, bruker du faktisk et AJAX-skjema?

Du forklarte at du laster inn skjemaet via AJAX, men sender du det på samme måte? Det virker for meg som du prøver å sende HTML-kode. Du kan koble til klikk-hendelsen for send inn-knappen før du sender inn skjemaet. Men siden knappen legges til siden under kjøretid, må du registrere en hendelse på dokument .

$(document).on("klikk", "input", function() ( // Valider skjema // Legg til feilmelding ved feil, og returner // Ellers send inn skjema via AJAX ));

Uansett, du kan bruke jQuerys uskarphet som et alternativ for å sjekke hvert felt når brukeren går videre til neste. Du kan til og med sjekke hver gang brukeren trykker på en tast med tastetrykk .

Lag en funksjon for å validere et skjema som returnerer sant/usant. Ring funksjonen rett før $.ajax. sjekk om retur er usann, så returner.. se eksempel nedenfor...

If(!validateForm()) returner false;

Jeg sjekker dem alltid rett før jeg legger dem inn i AJAX-samtalen. Her er min eksamen

$("#form_nieuwsbrief").bind("submit",function())( var name = $("input").val(); var email = $("input").val(); var continue = true ; if (navn=="")( $("input").css(("border":"2px solid rød")); fortsett = usann; ) if (email=="")( $(" input ").css(("border":"2px solid rød")); fortsett = usann; ) if(fortsett == usann)( $("#msg").append("Du har glemt informasjonen i vullen . "); setTimeout(function())( $(".alert").fadeOut(400, function())( $(this).remove(); )) ;),10000); ) if(fortsett = = sant) ( // foreta ajax-anropet

Det er bare et nyhetsbrev som ber om navn og e-postadresse. Men prinsippet er det samme. Før du foretar ajax-anropet, lag en if else-setning med variabelen du angir hvis noe er usant. ellers vil du holde deg til den første sjekken hans slik at du kan fortsette.

«Fool protection» er et sett med tiltak for å hindre innføring av uriktige opplysninger i et skjema. For eksempel hvis du trenger å skrive inn i et felt positivt tall fra 0 til 10, så bør du sjekke at brukeren ikke har skrevet inn tekst eller et tall som ikke ligger i det angitte området, dvs. tallet skal ikke være mindre enn null og mer enn ti.

Hvorfor legges det inn feil informasjon? Dette gjøres hovedsakelig av tre grunner.

Brukeren gjorde en feil ved et uhell, for eksempel leste han uoppmerksomt det han ble pålagt å angi.

Nettsiden ber om data på en tvetydig måte, og lar brukeren gjette og gjette hva de egentlig vil ha. Men meningene til utvikleren og brukeren er ikke alltid sammenfallende.

Det er en del mennesker som oppfatter instruksjoner som en utfordring og prøver å gjøre det motsatte. Slike brukere resonnerer omtrent slik: "Ja, de ber meg om å skrive inn et tall. Hva vil skje hvis jeg angir bokstavene?» Så spør de åpenbart feil informasjon og ser hva det fører til.

Det skal forstås at presis og korrekt formulering, selv om den reduserer sannsynligheten for feil, ikke på noen måte redder deg fra dem. Bare tekniske midler på serversiden lar deg få det nødvendige resultatet og unngå å legge inn feil informasjon. Imidlertid lar revisjon eller, som det også kalles, validering på klientsiden deg raskt sjekke dataene som er lagt inn av brukeren for korrekthet, uten å sende skjemaet til serveren. Dette sparer brukertid og reduserer belastningen på serveren. Fra et brukervennlighetssynspunkt er det også fordeler - brukeren mottar umiddelbart en melding om hvilken informasjon han har skrevet inn feil og kan rette opp feilen.

Obligatorisk felt

Noen skjemafelt må fylles ut før de sendes til serveren. Dette gjelder for eksempel registreringsskjemaet, hvor du må oppgi pålogging og passord. Brukes til å angi obligatoriske felt nødvendig attributt, som vist i eksempel 1.

Eksempel 1. Det påkrevde attributtet

HTML5 IE 10+ Cr Op Sa Fx

Obligatorisk felt

Logg Inn:

Passord:

Obligatoriske felter må fylles ut før innsending av skjemaet, ellers sendes ikke skjemaet til serveren og nettleseren vil gi en advarsel om dette. Meldingstypen avhenger av nettleseren, for eksempel viser Chrome et verktøytips som vist i fig. 1.

Ris. 1. Obligatorisk felt er ikke fylt ut

Datariktighet

I utgangspunktet er det to felt der brukerinndata sjekkes automatisk. Dette er en nettadresse og en e-postadresse. Chrome-nettleser sjekker også kalenderdatafeltet for gyldighet, men bare fordi det ikke har et museklikk-kalendervalggrensesnitt. Følgende regler gjelder for disse elementene.

Nettadressen ( ) må inneholde protokollen (http://, https://, ftp://).
E-postadressen ( ) må inneholde bokstaver eller tall før @-symbolet, etter det, deretter et punktum og et toppdomene.

Nettlesere har litt forskjellige retningslinjer for verifisering av brukerdata. For eksempel erstatter Opera http-protokoll:// før den angitte teksten automatisk, mens andre nettlesere forventer det fra brukeren. Chrome og Opera krever det postadresse det var et poeng, det er ikke nødvendig for Firefox.

Eksempel 2 viser et skjema med obligatoriske felt der to felt er validert av nettleseren.

Eksempel 2: Datakorrekthet

HTML5 IE 10+ Cr Op Sa Fx

Datariktighet

Fyll ut skjemaet (alle felt er obligatoriske)

Navn:

E-post:

Nettsted:

Opera sjekker bare et skjemaelement hvis det har et navneattributt.

Hva som skjer i Opera når du legger inn feil data er vist i fig. 2.

Ris. 2. Advarsel om feil data

Inndatamal

Noen data kan ikke klassifiseres i en av skjemaelementtypene, så du må bruke et tekstfelt for det. I dette tilfellet føres de iht en viss standard. Så, IP-adressen inneholder fire tall atskilt med en prikk (192.168.0.1), postnummer Russland er begrenset til seks sifre (124007), telefonen inneholder et retningsnummer og et spesifikt antall sifre, ofte atskilt med en bindestrek (391 555-341-42), osv. Nettleseren må spesifisere en inndatamal slik at den sjekker dataene som er lagt inn av brukeren i henhold til den. For å gjøre dette brukes mønsterattributtet, og verdien er et regulært uttrykk. Noen typiske verdier er oppført i tabellen. 1.

Eksempel 3 ber deg gå inn heksadesimal verdi farge (#ffcc00), og hvis den ikke er i dette området, viser nettleseren en feilmelding.

Eksempel 3. Inndatamal

HTML5 IE 10+ Cr Op Sa Fx

Fargeinngang

Skriv inn den heksadesimale fargeverdien (må starte med #)

I fig. Figur 3 viser en advarsel i Chrome-nettleseren.

Ris. 3. De angitte dataene samsvarer ikke med malen

Uvalidering

Validering er ikke alltid nødvendig for et skjema; for eksempel kan en utvikler ønske å bruke universell løsning i JavaScript, og det trenger ikke lenger duplikatkontroll av nettleseren. I slike tilfeller må du deaktivere innebygd validering. For å gjøre dette, bruk novalidate-attributtet til taggen. Eksempel 4 viser bruken av dette attributtet.

Eksempel 4: Uvalidering

HTML5 IE 10+ Cr Op Sa Fx

novalidate-attributt

For et lignende formål brukes formnovalidate-attributtet, som legges til knappen for å sende inn skjemaet, i i dette tilfelletå merke. I dette tilfellet vil skjemaet fra eksempel 4 se slik ut.

De som lager nettsider på et tidspunkt, står overfor behovet for å sjekke om brukeren har fylt ut feltene i et skjema som er lagt ut på siden. For dette formålet opprettes et slags alternativ for å sjekke tomme felt, som brukes i prosjektene. Men for hvert tilfelle kan antallet felt som må sjekkes være forskjellig. Dette fører til at det opprettede verifiseringsalternativet må endres avhengig av spesifikke forhold, og i fremtiden vil vi ha flere modifikasjoner av det.

I tillegg kan flere skjemaer plasseres på én side av nettstedet, som hver vil ha et annet antall obligatoriske felt. Som et resultat vil koden inkludere flere blokker med samme funksjoner, men forskjellige forhold, noe som ikke alltid er den rette løsningen.

I min praksis måtte jeg også bruke forskjellige varianter kontrollere utfyllingen av skjemafeltene avhengig av spesifikke forhold. Og i *.js-filen var det flere funksjoner for å sjekke forskjellige former, som økte volumet av kode og forverret oppfatningen.

På et tidspunkt ble det besluttet å skrive en versjon universell metode se etter tomme felt, som kan brukes for alle skjemaer med et hvilket som helst antall obligatoriske felt. Nødvendige forhold Denne metoden ble bestemt av enkelheten og fraværet av klumpete strukturer. Som et resultat ble det funnet en metode som tilfredsstilte meg med både sin enkelhet og allsidighet.

Essensen av denne metoden:

I html-markeringen for obligatoriske felt legges det til et dataattributt, som er en obligatorisk markør.

Validering utføres bare for de feltene som har dette attributtet.

Mulighet for å utvide funksjonaliteten ved å sjekke verdien, spesifisert av brukeren i felt.

Eksempel på skjemaoppmerking:

Skjemaoverskrift #1 Obligatorisk Påkrevd Påkrevd

Eksempel på feltvalideringskode:

$(".js-form-validate").submit(function () ( var form = $(this); var field = ; form.find("input").each(function () ( field.push(" input"); var verdi = $(this).val(), linje = $(this).closest(".some-form__line"); for(var i=0;i