A Walk Through Client-Side Form Validation in HTML

What is Form Validation?

Have you ever encountered a form on a website that returns an error message when you provide the wrong details or don’t input some information? The error messages can include:

• Username not found
• Incorrect password. Try again!
• Please fill in this field
• Your passcode should have eight characters

When you key in data into a form, the browser or website will check the provided information to see if it matches the required format. The application will accept the input and continue running if the data is correct and in the proper format. On the other hand, the application will cease running and return an error message if the details are incorrect. This process is known as form validation.

Types of Form Validation

There are two types of form validation: server-side form validation and client-side form validation.

Server-Side Validation

Server-side validation occurs when data is sent to a server from the browser for validation. A perfect scenario of server-side validation is a credit card form that accepts user input and then sends the data to a server to confirm the card is valid and has enough balance to make a particular transaction.

Pros of Server-Side Validation

1. Dynamic Validation – Server-side validation is more flexible because it can access databases and conduct complex validations.
2. Consistent and Compatible Validation – Unlike client-side validation, server-side validation works properly across different devices, browsers, and sites.
3. Increased Security – Server-side validation is more secure because it prevents invalid data or malicious input from entering a database.

Cons of Server-Side Validation

1. Reduced Response Time – The Request and response processes between the browser and server reduce the response time in server-side validation.
2. Poor User Experience – Poor response time and users’ inability to immediately determine the valid options negatively affect user experience.

Client-Side Validation

On the other hand, client-side validation involves checking data on the browser before sending it to the server. This type of validation is essential in ensuring the data a user submits conforms to all the requirements stipulated by various form controls. A good example is a registration form requiring users to enter their details and a short bio.

Pros of Client-Side Validation

1. Quick Feedback – Since client-side validation happens on the user’s computer, it quickly provides feedback to the user without reloading the page.
2. Data Accuracy – By detecting wrong inputs and alerting the users, client-side validation ensures the data collected is accurate.
3. Improved User Experience – Giving users instant feedback when using a form enhances user experience.
4. Reduced server load and bandwidth – Client-side validation only accepts valid data, therefore decreasing a browser’s server load and bandwidth.

Cons of Client-Side Validation

1. Security Concerns – Client-side form validation is less secure since it can’t process an application from attacks in a database or server.
2. Easy to Dodge – Users can bypass client-side validation by disabling JavaScript or manipulating the document object model (DOM).

HTML Built-In Form Controls

Client-side form validation can be achieved using HTML or JavaScript. HTML makes use of several form controls to help you implement effective client-side validation for your users.

Requiring an Input

When a specific field must be filled before submitting a form, we can use the required attribute in the input element. This attribute doesn’t need a value like other built-in form controls.

<form>
<label for="name">Name<label>
<input id="name" required>
</form>

Specifying Minimum and Maximum Values

Another built-in form control we can use is the minimum or maximum attributes in a number field. The attributes specify the minimum and maximum numerical values a user can select or enter in a form.

<form>
<label for ="guests">Number of guests</label>
<input id="guests" min="2" max="10" required> 
</form>

Indicating Type

This form control specifies the data type a user needs to input, whether an email address, a number, a text, or any other type. We use the type attribute and set its value to number, text, email, or password.

<form>
<label for ="age">Age</label>
<input id="age" type="number" required>
</form>

Constraining Text Length

We can use the minlength and maxlength attributes to set the minimum and maximum characters for a text area.

<form>
<textarea>Introduce yourself in less than 250 characters…</textarea>
<input type="text" minlength="50" maxlength="250" required>
</form>

Matching Text Pattern

Lastly, we can create a regular expression or regex that users must match when entering data. The form can only pass when the user’s input aligns with the preset regex. In this case, we use the pattern attribute and give it a regex.

<form>
<label for = "telephone">Enter your phone number</label>
<input id="telephone" type="number" pattern="[0-9] {10}"/>
</form>

Bottom Line

In this article, we exclusively discussed form validation in HTML. We also shed some light on the difference between server-side and client-side validation and outlined their respective pros and cons. Finally, we covered the most common built-in form controls used to validate forms on the client’s side. Applying server-side validation is significant for ensuring data accuracy, improving security, and improving user experience. You must also validate data on the server side.