Forms/Form Validation
Published: 2023-05-16 06:42:47



## 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:

```html
<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!

```html
<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()"

```javascript
const form= document.getElementById("submit")
```
html form could have multiple document:
```javascript
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:

```javascript
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:

```javascript
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:
```javascript
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:
```javascript
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:

<u>JavaScript Example</u>
```javascript
function validateForm() {
  let t= document.forms["myForm"]["fullname"].value;
  if (t == "") {
    alert("Name cannot be left empty");
    return false;
  }
}
```
The function can be :

<u>HTML Form Example</u>
```html
<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
```html
<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