Översikt över validering av HTML-formulär

Webformulär är ofta den mest använda och viktiga delen av webbapplikationer. Formvalidering är processen för validering av de uppgifter som användaren har angett mot de fördefinierade reglerna. Formvalideringen kan ske antingen på klientsidan eller på serversidan. Validering av HTML-formulär är den form av validering på klientsidan där valideringen av data kommer att utföras innan data skickas till servern. Validering av HTML-formulär är betydande och användbar eftersom det förbättrar användargränssnittet på klientsidan och prestanda för webbapplikationen.

HTML-formulärvalidering

Det finns huvudsakligen två sätt på vilket validering av HTML-formulär kan utföras,

  • Använda inbyggd HTML5-funktionalitet
  • Använda JavaScript

1. Använda inbyggd HTML5-funktionalitet

HTML5 tillhandahåller den här funktionen för formulärvalidering utan att använda JavaScript. Formelement kommer att ha valideringsattribut tillagda vilket möjliggör formulärvalidering för oss automatiskt. Valideringsattribut tillåter oss att specificera olika typer av regler för våra formelement. De tillåter oss att ställa in datorns längd, ställa in en begränsning av värdena på data etc.

Låt oss se det enkla exemplet på validering av HTML-formulär med hjälp av inbyggd formvalideringselement och fortsätter sedan vidare för HTML-formulärvalidering med JavaScript.

Exempel

Formvalidering med HTML5-valideringsattribut - I det här exemplet kommer vi att använda formulärvalideringstagg som krävs vilket gör att data i det fältet är obligatoriskt att anges, annars kommer inte formuläret att skickas in. Nedan är kodavsnittet för samma tillsammans med en viss utformning av ett webbformulär.



.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)


Name:


Så vi har mycket enkel webbformulär tillsammans med bara ett inmatningsdatafält som "Namn". Observera att vi har använt önskat nyckelord i inmatningselementet.

Utgång :

Låt oss försöka skicka formuläret utan att ange något värde i namnfältet. När du skickar in får du felmeddelandet som "Vänligen fyll i detta fält" och formuläret kommer inte att skickas in.

Output med blank data

Så det kan ses att felmeddelandet inte läggs till av oss och tillhandahålls av HTML själv.

Precis som det attribut som krävs av HTML finns det olika formtaggar som är tillgängliga att använda. Nedan är listan över några formulärvalideringstaggar,

  • minlängd: Används för att ställa in en minimilängd för ett element
  • maxlength: Används för att ställa in önskad maximal längd för ett element
  • mönster: Används för att definiera ett regelbundet uttryck

2. Använd JavaScript

JavaScript används allmänt för validering av HTML-formulär eftersom det ger fler sätt att anpassa och ställa in valideringsreglerna, även några av taggarna i HTML5 stöds inte i de äldre versionerna av Internet Explorer. JavaScript används under lång tid för formulärvalidering.

I validering av JavaScript-formulär definierar vi i princip funktioner för att validera data innan de skickas till servern. Vi kan implementera alla logiker som krävs för att uppnå valideringsreglerna. JavaScript är mer flexibelt på det här sättet eftersom det inte finns någon begränsning för att definiera regler. Men det är nödvändigt att ha kunskap om JavaScript för att implementera detta jämfört med formulärvalidering med inbyggda taggar.

Låt oss se exemplet på formulärvalidering med JavaScript. Vi kommer att implementera samma exempel på formuläret med bara en ingång som namnelement.

Exempel:



.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
.errorMessage (
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
)
.errorMessage.top-arrow:after (
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
)


Name:


function validateForm() (
var nameVal = document.forms("simpleForm")("name").value;
if(nameVal == null || nameVal == "") (
document.getElementsByClassName( "errorMessage" )(0).style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )(0).innerHTML = "Please Fill out this field";
return false;
) else (
return true;
)
)

Från föregående exempel har vi tagit bort den nödvändiga taggen från formelementet "name". Istället har vi lagt till en tagg som sänds in i formelementet. Som nämnts tidigare kommer vi att skriva funktion för validering för vilken tagg läggs till.

Vi har skrivit en funktion som heter validateForm () som gör valideringen. Vi implementerar samma regel för att kontrollera om de angivna uppgifterna i namnfältet är tomma eller inte. Logiken för att kontrollera detta är vid ett klick på skicka-knappen, denna funktion kommer att anropas och det angivna värdet kontrolleras om det är noll eller antingen tomt. Funktionen kommer att återkomma i händelse av att data inte är noll eller tomt, men om data är tomma eller noll visas felmeddelandet för användaren.

Produktion

Om vi ​​försöker skicka in formuläret utan att mata in några data, bör vi få felmeddelandet på skärmen. Som framgår av exemplet att vi har designat felmeddelandet på samma sätt som möjligt.

Output med blank data

Slutsats - HTML-formulärvalidering

Så vi har sett ett mycket enkelt exempel på formulärvalidering på klientsidan. Det finns huvudsakligen två sätt att utföra HTML-formulärvalidering. Först använder den inbyggda funktionaliteten som tillhandahålls i HTML5 och för det andra med JavaScript. Med den första metoden behöver vi inte skriva extra kod.

Rekommenderade artiklar

Detta har varit en guide till HTML-formulärvalidering. Här diskuterar vi översikten och två sätt för validering av HTML-formulär som de kan utföras på. Du kan också titta på följande artiklar för att lära dig mer -

  1. HTML-händelser
  2. Versioner av Html
  3. HTML5-element
  4. Användningar av HTML

Kategori:

Verktyg för webbutveckling