Form/Form Validation

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 is created in this way:

<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

HTML form validation can be done by JavaScript.

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 filled in all the required fields?
• has the user entered a valid date and time?
• 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