Overzicht van HTML-formuliervalidatie
Webformulieren zijn vaak het meest gebruikte en essentiële onderdeel van webapplicaties. Formuliervalidatie is het validatieproces van de gegevens die door de gebruiker zijn ingevoerd aan de hand van de vooraf gedefinieerde regels. De formuliervalidatie kan zowel aan clientzijde als aan serverzijde plaatsvinden. De HTML-formuliervalidatie is de vorm van client-side validatie waarbij de validatie van gegevens wordt uitgevoerd voordat de gegevens naar de server worden verzonden. HTML-formuliervalidatie is belangrijk en nuttig omdat het de gebruikersinterface van de client en de prestaties van de webtoepassing verbetert.
HTML-formuliervalidatie
Er zijn hoofdzakelijk twee manieren waarop validatie van HTML-formulieren kan worden uitgevoerd,
- Ingebouwde HTML5-functionaliteit
- JavaScript gebruiken
1. Gebruik van de ingebouwde HTML5-functionaliteit
HTML5 biedt deze functie voor formuliervalidatie zonder JavaScript. Aan formulierelementen worden validatiekenmerken toegevoegd die de formuliervalidatie automatisch voor ons inschakelen. Met validatiekenmerken kunnen we verschillende soorten regels voor onze formulierelementen opgeven. Ze stellen ons in staat om de lengte van de gegevens in te stellen, een beperking van de waarden van de gegevens in te stellen, enz.
Laten we eens kijken naar het eenvoudige voorbeeld van HTML-formuliervalidatie met behulp van ingebouwde formuliervalidatie-elementen. Vervolgens gaan we verder met HTML-formuliervalidatie met JavaScript.
Voorbeeld
Formuliervalidatie met behulp van HTML5-validatiekenmerk - In dit voorbeeld gebruiken we formuliervalidatietag vereist waardoor gegevens in dat veld verplicht worden ingevoerd, anders wordt het formulier niet verzonden. Hieronder vindt u het codefragment voor hetzelfde, samen met enkele opmaak van een webformulier.
.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:
We hebben dus een heel eenvoudig webformulier, samen met slechts één invoergegevensveld als "Naam". Houd er rekening mee dat we het vereiste trefwoord hebben gebruikt in het invoertagelement.
Uitgang :
Laten we proberen het formulier in te dienen zonder een waarde in het naamveld in te voeren. Bij het indienen krijgt u het foutbericht 'Vul dit veld in' en het formulier wordt niet verzonden.
Uitvoer met lege gegevens
Het is dus te zien dat foutmelding niet door ons wordt toegevoegd en wordt geleverd door HTML zelf.
Net als het vereiste kenmerk van HTML, zijn er verschillende formuliertags die kunnen worden gebruikt. Hieronder is de lijst met enkele formuliervalidatietags,
- minlength: wordt gebruikt om de vereiste minimale lengte van een element in te stellen
- maxlength: wordt gebruikt om de vereiste maximale lengte van een element in te stellen
- patroon: wordt gebruikt om een reguliere expressie te definiëren
2. JavaScript gebruiken
JavaScript wordt veel gebruikt voor HTML-formuliervalidatie, omdat het meer manieren biedt om de validatieregels aan te passen en in te stellen. Ook worden sommige tags in HTML5 niet ondersteund in de oudere versies van Internet Explorer. JavaScript wordt al lang gebruikt voor formuliervalidatie.
In de validatie van JavaScript-formulieren definiëren we in principe functies om de gegevens te valideren voordat ze naar de server worden verzonden. We kunnen elke logica implementeren die nodig is om de validatieregels te bereiken. JavaScript is op deze manier flexibeler omdat er geen beperking is voor het definiëren van regels. Maar het is noodzakelijk om kennis van JavaScript te hebben om dit te implementeren in vergelijking met formuliervalidatie met behulp van ingebouwde tags.
Laten we het voorbeeld van formuliervalidatie met JavaScript bekijken. We zullen hetzelfde voorbeeld van het formulier implementeren met slechts één invoer als het naamelement.
Voorbeeld:
.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;
)
)
Uit het vorige voorbeeld hebben we de vereiste tag verwijderd uit het formulierelement "naam". In plaats daarvan hebben we één tag toegevoegd in het formulierelement. Zoals eerder vermeld, zullen we een functie schrijven ter validatie waarvoor de tag is toegevoegd.
We hebben een functie met de naam validateForm () geschreven die de validatie uitvoert. We implementeren dezelfde regel om te controleren of de ingevoerde gegevens in het naamveld leeg zijn of niet. De logica om dit te controleren is bij een klik op de verzendknop, deze functie wordt opgeroepen en de ingevoerde waarde wordt gecontroleerd of deze nul of leeg is. De functie keert terug als gegevens niet leeg of leeg zijn, maar als de gegevens leeg of leeg zijn, wordt de foutmelding aan de gebruiker getoond.
uitgang
Als we proberen het formulier in te dienen zonder gegevens in te voeren, moeten we de foutmelding op het scherm krijgen. Zoals te zien is in het voorbeeld dat we de foutmelding op dezelfde manier hebben ontworpen.
Uitvoer met lege gegevens
Conclusie - HTML-formuliervalidatie
We hebben dus een heel eenvoudig voorbeeld van formuliervalidatie aan de client-kant gezien. Er zijn hoofdzakelijk twee manieren om validatie van HTML-formulieren uit te voeren. Ten eerste gebruikt de ingebouwde functionaliteit in HTML5 en ten tweede is JavaScript. Met de eerste methode hoeven we geen extra code te schrijven.
Aanbevolen artikelen
Dit is een leidraad geweest voor HTML-formuliervalidatie. Hier bespreken we het overzicht en twee manieren van HTML-formuliervalidatie waarmee ze kunnen worden uitgevoerd. U kunt ook de volgende artikelen bekijken voor meer informatie -
- HTML-evenementen
- Versies van HTML
- HTML5-elementen
- Toepassingen van HTML