Har du någonsin försökt skicka ett formulär, bara för att webbsidan ska ge dig ett felmeddelande som talar om att ett eller flera av fälten är ogiltiga? I så fall har du upplevt formulärvalidering.

Validering är ofta viktigt för att få ren, användbar data. Från e-postadresser till datum, om det behöver vara korrekt, måste du kontrollera det noggrant.

Vad är formulärvalidering?

Formulärvalidering är processen för att säkerställa att uppgifterna som skrivs in i ett formulär av en användare är korrekta och fullständiga. Du kan göra detta på klientsidan genom att använda inbyggda HTML-funktioner som det obligatoriska attributet. Du kan också validera på klienten med JavaScript, och det finns externa Next.js-bibliotek för att underlätta processen.

Det finns flera skäl till varför formulärvalidering är viktigt. För det första hjälper det till att säkerställa att uppgifterna i ett formulär är fullständiga och korrekta. Detta är viktigt eftersom det hjälper till att förhindra fel när din app skickar data till en server eller databas.

instagram viewer

För det andra kan formulärvalidering hjälpa till att förbättra användbarheten av ett formulär genom att ge feedback när en användare anger ogiltiga data. Detta kan hjälpa till att undvika frustration och förvirring från användarens sida.

Slutligen kan formulärvalidering bidra till att förbättra säkerheten för ett formulär genom att säkerställa att det bara skickar in giltiga data.

Hur man validerar formulär i Next.js

Det finns två sätt att validera formulär i Next.js: med de inbyggda metoderna eller med hjälp av externa bibliotek.

Använda de inbyggda metoderna

HTML tillhandahåller flera metoder för att validera formulär, varav den vanligaste är nödvändig attribut. Detta säkerställer att ett fält inte kan vara tomt. Du kan använda den här metoden från din Next.js-app, helt enkelt genom att inkludera attributet i inmatningstaggar som du genererar. HTML ger också en mönster attribut. Du kan använda detta tillsammans med en reguljärt uttryck för mer komplex validering.

Det här exemplet innehåller ett formulär med två fält: namn och e-post. Namnfältet är obligatoriskt och e-postfältet måste matcha ett reguljärt uttryck.

importera Reagera från 'reagera'
klassMyFormsträcker sigReagera.Komponent{
 framställa() {
lämna tillbaka (
<form >
<märka>
 Namn:
<ingångstyp="text" namn="namn" krävs />
</label>
<märka>
 E-post:
<ingångstyp="e-post" namn="e-post"
 mönster="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<ingångstyp="Skicka in" värde="Skicka in" />
</form>
 )
 }
}
exporterastandard MyForm

Den här koden importerar React-biblioteket, skapar sedan en klass som heter MyForm och renderar ett formulärelement. Inuti formulärelementet finns två etikettelement.

Det första etikettelementet innehåller ett obligatoriskt textinmatningsfält. Det andra etikettelementet innehåller ett e-postinmatningsfält med ett reguljärt uttryck i dess mönsterattribut.

Äntligen har du en skicka-knapp. När en användare skickar in formuläret säkerställer det obligatoriska attributet att de fyllde i namnfältet. E-postfältets mönsterattribut säkerställer att e-postmeddelandet är i det angivna formatet. Om något av dessa villkor misslyckas kommer formuläret inte att skickas.

Det finns några nackdelar med att använda de inbyggda metoderna. För det första kan det vara svårt att hålla reda på alla olika valideringsregler som du har satt upp. För det andra, om du har många fält, kan det vara tråkigt att lägga till det obligatoriska attributet till var och en. Slutligen ger de inbyggda metoderna bara grundläggande validering. Om du vill göra mer komplex validering måste du använda ett externt bibliotek.

Använda ett externt bibliotek

Utöver de inbyggda metoderna finns det även många externa bibliotek som du kan använda för att validera formulär. Några populära bibliotek inkluderar Formik, react-hook-form och Yup.

För att använda ett externt bibliotek måste du först installera det. Till exempel, för att installera Formik, kör följande kommando:

npm Installera formik

När du har installerat biblioteket kan du importera det till din komponent och använda det för att validera ditt formulär:

importera Reagera från 'reagera'
importera { Formik, Form, Field } från 'formik'
konst MyForm = () => (
<Formik
 initialValues={{ namn: '', e-post: '' }}
 validera={värden => {
konst fel = {}
om (!värden.namn) {
 errors.name = 'Nödvändig'
 }
om (!värden.e-post) {
 errors.email = 'Nödvändig'
 } annanom (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (values.email)
 ) {
 errors.email = 'Ogiltig e-postadress'
 }
lämna tillbaka fel
 }}
 onSubmit={(värden, { setSubmitting }) => {
 setTimeout(() => {
 varna(JSON.stringify (värden, null, 2))
 setSubmitting(falsk)
 }, 400)
 }}
>
 {({ isSubmitting }) => (
<Form>
<Fälttyp="text" namn="namn" />
<Fälttyp="e-post" namn="e-post" />
<knapptyp="Skicka in" disabled={isSubmitting}>
 Skicka in
</button>
</Form>
 )}
</Formik>
)
exporterastandard MyForm

Här importerar du först Formik, Form, och Fält komponenter från Formik-biblioteket. Skapa sedan en komponent som heter MyForm. Den här komponenten återger ett formulär som har två fält: namn och e-post.

InitialValues ​​prop ställer in de initiala värdena för formulärfälten. I det här fallet är både namn- och e-postfälten tomma strängar.

Validera prop anger valideringsreglerna för formulärfälten. I det här fallet är namnfältet obligatoriskt och e-postfältet ska matcha ett reguljärt uttryck.

OnSubmit-rekvisiten ställer in funktionen som React kommer att anropa när användaren skickar in formuläret. I det här fallet är funktionen en varning som visar värdena för formulärfälten.

isSubmitting-rekvisiten avgör om formuläret för närvarande skickas in. I det här fallet ställer du in den på false.

Till sist, rendera formuläret med hjälp av Form-komponenten från Formik.

Fördelar med att använda externa bibliotek i Next.js

Det finns flera fördelar med att använda ett externt bibliotek som Formik för att validera formulär i Next.js. En fördel är att det är mycket lättare att visa felmeddelanden för användaren. Till exempel, om ett obligatoriskt fält inte är ifyllt, kommer Formik automatiskt att visa ett felmeddelande inklusive en föreslagen korrigering.

En annan fördel är att Formik kan hantera mer komplexa valideringsregler. Till exempel kan du använda Formik för att verifiera att två fält är likadana (som ett lösenord och lösenordsbekräftelsefält).

Slutligen gör Formik det enkelt att skicka formulärdata till en server. Du kan till exempel använda Formik för att skicka formulärdata till ett API.

Öka användarengagemang genom att använda formulär

Du kan använda formulär för att öka användarnas engagemang. Genom att ge feedback när en användare anger ogiltiga data kan du hjälpa till att undvika frustration och förvirring.

Med hjälp av externa bibliotek kan du lägga till funktioner som autokomplettering och villkorade fält. Dessa kan hjälpa till att göra dina formulär ännu mer användarvänliga. När de används på rätt sätt kan formulär vara ett kraftfullt verktyg för att hjälpa dig att öka användarnas engagemang och samla in den data du behöver.

Förutom validering har Next.js många funktioner som du kan använda för att öka användarens engagemang.