DEV Community: Ukobaandrew

Forms/Form Validation

Ukobaandrew — Tue, 16 May 2023 06:42:47 +0000

JavaScript Forms

A form is a document that contains spaces (also known as fields or placeholders) for writing or selecting information for a series of documents with similar contents. Except for a serial number, the printed components of the documents are usually the same.

When completed, forms can be a statement, a request, an order, and so on; a check can also be a form. There are other tax forms; filling one out is a requirement to calculate how much tax one owes, and/or the form is a request for a refund. Also see the tax return.

When the information acquired on the form needs to be transferred to different departments within an organization, forms might be filled out in duplicate (or triplicate, meaning three times). This is possible.
Forms in html are basically a container with different elements included in it.

Forms in html are created like this:

<forms action="\signup" method="post" Id="signup">
</forms>

Basically there are two attributes in the form:

Action: This is an attribute which describes the uniform resource locator(URL) that will process on submission.
Method: This attribute specifies the http method that will be used to submit the form. While this attribute can accept different values, the most common methods however include get and post. The GET method sends the form data to the server via the action(URL) specified as query string. While the POST method will send the form data in the request body.

The Html form element also provides some other useful attributes:

SUBMIT: Used to submit your data to the server and to wherever you want it
RESET: Resets the form data.

We use other attributes known as input, this create a box, either a text, message or any other items you need to input to fill the box!

<Form>
<Label for name="fullname">Name</Label>
<input type="text" name="fullname" placeholder="Your fullname"/>
<Label for name="email">Email<label/>
<input type="text" name="email" placeholder="enter your email"/>
<button type="submit" id="submit">Submit</button>
</Form>

Finding Form Elements in Javascript

To locate form elements in javascript we use the DOM(document object method) selecting method such as :

document.getElementByid()
document.getElementsByClassname()
document.getElementsByTagname() and many more

we can assign a value ,say form and locate an item inside the htmlform above using any of the DOM methods say "document.getElementByid()"

const form= document.getElementById("submit")

html form could have multiple document:

document.form

this returns an array of html form collections...
in html we might have different forms so to find any of the forms we use indexes:

document.form[0]
document.form[1]

this locates the first form elements in the html list of forms.

Submitting Forms

There are submit buttons on all forms.
The submit event is fired before the request is delivered to the server when you submit the form. This allows you to validate the form data. If the form data is incorrect, you can cancel the submission.

To add an event listener to the submit event, use the form element's addEventListener() method as follows:

const form="document.getElementById("signup")
form.addEventListener('submit', (event)=> {
//work on form data
});

To prevent the form from submitting, you use the preventDefault() method of the event object in the submit event handler , so we have:

form.addEventListener('submit', (event) => {
    // don't submit form
    event.preventDefault();
});

Typically, you can call the event.preventDefault() method when the form data is invalid. in order to submit form in JavaScript, you call the submit() method of the form object:

form.submit();

It should be noted that the form.submit() method does not trigger the submit event. As a result, before executing this method, you should always validate the form.

JavaScript Form Validation

JavaScript is capable of validating HTML forms.

If a form field (fullname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted:

JavaScript Example

function validateForm() {
  let t= document.forms["myForm"]["fullname"].value;
  if (t == "") {
    alert("Name cannot be left empty");
    return false;
  }
}

The function can be :

HTML Form Example

<form name="myForm" action="/action.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fullname">
<input type="submit" value="Submit">
</form>

Automatic HTML Form Validation

HTML form validation can be done automatically by the browser:

If a form field (fullname) is null, the attribute "required" prevents this form from submitting:

HTML Form Example

<form action="/action.php" method="post">
  <input type="text" name="fullname" required>
  <input type="submit" value="Submit">
</form>

Automatic HTML form validation is a new feature so it does not work does in all versions of internet explorer expecially version 9 and below.

Data Validation

Data validation is the act of making sure that users input is neat, correct, and functional.

Typical validation tasks are:

-Has the user completed all of the essential fields?
-Is the user's date and time correct?

has the user entered a text in a numeric field?
The most common reason for data validation is to ensure correct user input.

Validation can be defined by a variety of approaches and applied in a variety of ways, including:

Server side validation is conducted by a web server after input has been provided to the server.

client-side validation is executed by web browser before submitting data to a web server.

HTML Constraint Validation

HTML5 added a new HTML validation concept known as constraint validation.

The following factors are used to validate HTML constraints:

Constraint validation using HTML Input Attributes
Constraint validation with CSS Pseudo Selectors
Constraint validation with DOM Properties and Methods
Constraint Validation with HTML Input Attributes

summary

We use <forms> to start a form element.
Forms must be validated to make users information clear, neat and correct.
Its important to add an eventListener to validate the forms

Arrays iteration in JavaScript

Ukobaandrew — Sat, 07 May 2022 14:55:36 +0000

Introduction

Array iteration in JavaScript also known as Loops can execute a block of code a number of times.
Loops are useful if you wish to repeat the same code with a different value each time.

You can now write in simple lines and let loops do the job for you.

Example: This is frequently the case while writing an array, if we are to code different array iteration values;

const foods= array[fish, pizza, meat, rice, beans];

text += foods[0] + "<br>"; 

text += foods[1] + "<br>"; 
text += foods[2] + "<br>"; 
text += foods[3] + "<br>"; 
text += foods[4] + "<br>";

looping has made it so easy and fluent also time efficient instead of typing same code a number of time,
You can simply type in few lines of coding using loops
:

const foods= array[fish, pizza, meat, rice, beans];
for(i=0; i<foods.length; i++){
console.log(i)

}

Different Kinds of Loops
JavaScript supports different kinds of loops:

for - loops through a block of code a number of times
for/in - loops through the properties of an object
for/of - loops through the values of an iterable object
while - loops through a block of code while a specified condition is true
do/while - also loops through a block of code while a specified condition is true.

USES AND BENEFITS
-Loops can execute a block of code a number of times
-Looping saves time and stress
-looping can be achieved in just few lines of coding.

The For Loop

The for loop is often the tool you will use when you want to create a loop.

The for loop has the following syntax:


for (statement 1; statement 2; statement 3) {
    code block to be executed
}

Statement 1 is executed before the loop (the code block) starts.

Statement 2 defines the condition for running the loop (the code block).

Statement 3 is executed each time after the loop (the code block) has been executed.

Example

for (i = 0; i < 6; i++) {
    text += "The number is " + i + "<br>";
}

From the example above, you can read:

Statement 1: sets a variable before the loop starts (var i = 0).

Statement 2: defines the condition for the loop to run (i must be less than 6).

Statement 3: increases a value (i++) each time the code block in the loop has been executed.

Statement 1
Normally you will use statement 1 to initiate the variable used in the loop (i = 0).

This is not always the case, JavaScript doesn't care. Statement 1 is optional.

You can initiate many values in statement 1 (separated by comma):

Example

for (i = 0, len = foods.length, text = ""; i < len; i++) {
    text += foods[i] + "<br>";
}

And you can omit statement 1 (like when your values are set before the loop starts):

Example

var i = 2;
var len =foods.length;
var text = "";
for (; i < len; i++) {
    text += cars[i] + "<br>";
}

Statement 2
Often statement 2 is used to evaluate the condition of the initial variable.

This is not always the case, JavaScript doesn't care. Statement 2 is also optional.

If statement 2 returns true, the loop will start over again, if it returns false, the loop will end.

Note If you omit statement 2, you must provide a break inside the loop. Otherwise the loop will never end. This will crash your browser. Read about breaks in a later chapter of this tutorial.
Statement 3
Often statement 3 increases the initial variable.

This is not always the case, JavaScript doesn't care, and statement 3 is optional.

Statement 3 can do anything like negative increment (i--), positive increment (i = i + 2), or anything else.

Statement 3 can also be omitted (like when you increment your values inside the loop):

Example

var i = 0;
var len = foods.length;
for (; i < len; ) {
    text += foods[i] + "<br>";
    i++;
}

The For/In Loop

The JavaScript for/in statement loops through the properties of an object:

Example

var person = {fname:"Andrew", lname:"Elijah", age:30};
var text = "";
var x;
for (x in person) {
    text += person[x];
}

JavaScript While Loop

Loops can execute a block of code as long as a specified condition is true.

The While Loop
The while loop loops through a block of code as long as a specified condition is true.

Syntax

while (condition) {
    code action to be executed
}

Example
In the following example, the code in the loop will run, over and over again, as long as a variable (i) is less than 100:

Example

while (i < 100) {
    text += "The number is " + i;
    i++;
}

Note If you forget to increase the variable used in the condition, the loop will never end. This will crash your browser.

The Do/While Loop

The do/while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

Syntax

do {
    code block to be executed
}
while (condition);

Example
The example below uses a do/while loop. The loop will always be executed at least once, even if the condition is false, because the code block is executed before the condition is tested:

Example

do {
    text += "The number is " + i;
    i++;
}
while (i < 10);

Do not forget to increase the variable used in the condition, otherwise the loop will never end!

Summary

The while loop is much the same as a for loop, with statement 1 and statement 3 omitted.

The loop in this example uses a for loop to collect the car names from the cars array:

Example

var days = ["Mondays", "Tuesdays", "Fridays", "Sundays"];
var i = 0;
var text = "";

for (;days[i];) {
    text += days[i] + "<br>";
    i++;
}

The loop in this example uses a while loop to collect the car names from the cars array:

Example

var days = ["Mondays", "Tuesdays", "Fridays", "Sundays"];
var i = 0;
var text = "";

while (days[i]) {
    text += days[i] + "<br>";
    i++;
}

so the loops are similar and can perform the same action if coded properly!!!!!