Inleiding tot formulieren in JavaScript

JavaScript is een programmeertaal die veel wordt gebruikt in een webtoepassing voor het berekenen, manipuleren en valideren van gegevens, het maken van dynamische pagina's en interactie met de gebruiker. Omdat JavaScript veel gebruiksscenario's kent, leren we in dit artikel over formulieren en formuliervalidatie via JavaScript.

Met behulp van JavaScript kunnen we het HTML-formulier en de elementen aan de client-zijde verbeteren, valideren zonder zelfs maar een beroep te doen op de server. JavaScript kan ervoor zorgen dat aan alle vereisten wordt voldaan door de gebruiker voordat het formulier bij het aanvraagprogramma wordt ingediend.

Omdat we het formulier aan de clientzijde kunnen valideren, wordt de gegevensverwerking sneller in vergelijking met validatie aan de serverzijde. De meeste webontwikkelaars maken gebruik van JavaScript-formuliervalidatie.

Formulier en formuliervalidatie in JavaScript

Formulieren vormen een belangrijk onderdeel van elke webtoepassing om gebruikersinformatie, feedback of vragen te verzamelen. Via JavaScript kunnen we een betere gebruikerservaring bieden door de resultaten op een efficiënte manier aan de gebruiker te tonen.

Elementen die het meest worden gebruikt in formulieren om gegevens te verzamelen zijn:

  • Tekstvak: om een ​​tekst in te voeren
  • Drukknop: een actie uitvoeren
  • Radioknoppen: om een ​​optie uit een groep opties te selecteren
  • Selectievakjes: een enkele, onafhankelijke optie selecteren of deselecteren

Bij het implementeren van formulieren moeten we een naam opgeven voor ons formulier en de elementen die we in ons formulier hebben gebruikt, omdat de namen die we hebben toegewezen ons helpen om naar dat object (formulier en het element ervan) in ons JavaScript te verwijzen.

Een typische vorm lijkt op die hieronder,

Code:



Opmerking: ik heb NAME = attributen opgegeven voor alle formulierelementen, inclusief het formulier zelf.

JavaScript-formulier maakt gebruik van gebeurtenishandlers, zoals onClick of onSubmit om een ​​JavaScript-actie op te roepen wanneer de gebruiker een actie in het formulier uitvoert, zoals klikken op een knop.

Voorbeeld om gebruikersinformatie in JavaScript te verzamelen en te valideren

De code-implementatie voor het verzamelen en valideren van gebruikersinformatie wordt hieronder gegeven.

1. index.html

Code:



JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music



JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music






JavaScript | User Sign-In Form


Personal Information
Full Name


Email Address


Mobile Number


Password


Country
Select
Amstermdam
India
Mexico
UAE


Gender
Male
Female


Hobbies (Optional)
Sports
Reading
Music




2. vaidate.js

Code:

// Defining a function to display errtext message
function printerrtext(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
// Defining a function to validate form
function validateForm() (
// Retrieving the values of form elements
var name = document.demoForm.name.value;
var email = document.demoForm.email.value;
var mobile = document.demoForm.mobile.value;
var country = document.demoForm.country.value;
var gender = document.demoForm.gender.value;
var pswd = document.demoForm.pswd.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
// Populate hobbies array with selected values
hobbies.push(checkboxes(i).value);
)
)
// Defining errtext variables with a default value
var nameErr = emailErr = mobileErr = countryErr = genderErr = pswdErr = true;
// Validate name
if(name == "") (
printerrtext("nameErr", "Please enter your name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printerrtext("nameErr", "Please enter a valid name");
) else (
printerrtext("nameErr", "");
nameErr = false;
)
)
// Validate email address
if(email == "") (
printerrtext("emailErr", "Please enter your email address");
) else (
// Regular expression for basic email validation
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printerrtext("emailErr", "Please enter a valid email address");
) else(
printerrtext("emailErr", "");
emailErr = false;
)
)
// Validate mobile number
if(mobile == "") (
printerrtext("mobileErr", "Please enter your mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printerrtext("mobileErr", "Please enter a valid 10 digit mobile number");
) else(
printerrtext("mobileErr", "");
mobileErr = false;
)
)
// Validate Password
if(pswd == "")(
printerrtext("pswdErr", "Please enter your password");
) else(
var regex = /^(?=.*(0-9))(?=.*( (email protected) #$%^&*))( (email protected) #$%^&*)(6, 16)$/;
if(regex.test(pswd) === false) (
printerrtext("pswdErr", "Min : 6 chacracter in form Asd4$l");
) else(
printerrtext("pswdErr", "");
pswdErr = false;
)
)
// Validate country
if(country == "Select") (
printerrtext("countryErr", "Please select your country");
) else (
printerrtext("countryErr", "");
countryErr = false;
)
// Validate gender
if(gender == "") (
printerrtext("genderErr", "Please select your gender");
) else (
printerrtext("genderErr", "");
genderErr = false;
)
// Prevent the form from being submitted if there are any errtexts
if((nameErr || emailErr || mobileErr || countryErr || genderErr || pswdErr) == true) (
return false;
) else (
// Creating a string from input data for preview
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
// Display input data in a dialog box before submitting the form
alert(dataPreview);
)
);

3. form-style.css

Code:

body (
font-size: 16px;
background: #f9f9f9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
)
h2 (
text-align: center;
text-decoration: underline;
)
form (
width: 300px;
background: #fff;
padding: 15px 40px 40px;
border: 1px solid #ccc;
margin: 50px auto 0;
border-radius: 5px;
)
label (
display: block;
margin-bottom: 5px
)
label i (
color: #999;
font-size: 80%;
)
input, select (
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
)
.row (
padding-bottom: 10px;
)
.form-inline (
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
)
.form-inline label, .form-inline input (
display: inline-block;
width: auto;
padding-right: 15px;
)
.errtext (
color: red;
font-size: 90%;
)
input(type="submit") (
font-size: 110%;
font-weight: 100;
background: #006dcc;
border-color: #016BC1;
box-shadow: 0 3px 0 #0165b6;
color: #fff;
margin-top: 10px;
cursor: pointer;
)
input(type="submit"):hover (
background: #0165b6;
)

Uitgang 1: Correcte gebruikersinvoer

Uitgang 2: onjuiste / ontbrekende gebruikersreferenties

  • index.html: maakt het formulier.
  • validate.js: valideert het formulier.
  • form-style.css: ontwerpt de lay-out van het formulier.

De gegevens die in het formulier zijn ingevoerd, moeten de juiste indeling hebben zoals vereist door de toepassing en bepaalde velden moeten verplicht worden ingevuld om het formulier in te dienen.

Conclusie

In dit artikel hebben we geleerd over de vorm en de verschillende elementen of besturingselementen die in formulieren worden gebruikt en welke rol JavaScript speelt in de formuliervalidatie, verificatie van gegevens die door de gebruiker zijn ingevoerd, functies voor gebeurtenisafhandeling wanneer een actie wordt uitgevoerd, zoals klikken op een knop en de voordelen ervan.

Aanbevolen artikelen

Dit is een gids voor formulieren in JavaScript. Hier bespreken we hoe gebruikersinformatie kan worden verzameld en gevalideerd met passende voorbeelden. U kunt ook de volgende artikelen bekijken voor meer informatie-

  1. Inkapseling in JavaScript (werken, voordelen)
  2. Stappen om objecten in JavaScript te maken
  3. Logica om reverse te vinden in JavaScript met voorbeelden
  4. Top 6 compilers in JavaScript
  5. Volledige gids voor checkbox in Bootstrap
  6. Soorten formulieren reageren met voorbeelden
  7. Handleiding voor HTML-formuliervalidatie met voorbeelden

Categorie:

Software ontwikkeling