What Is Form Validation?

When you enter data, the browser or server will check that it is in the right format and valid for the application. Validation done in the browser is called client-side form validation; if the server does it, it is called server-side form validation. This section presents built-in client-side form validation. The last example in this section shows you how to validate forms without a built-in API using JavaScript and the DOM.

Client-side form validation

Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls. This article leads you through basic concepts and examples of client-side form validation.

Prerequisites: Computer literacy, a reasonable understanding of HTML, CSS, and JavaScript.
Objective: To understand what client-side form validation is, why it's important, and how to apply various techniques to implement it.


Client-side validation is an initial check and an important feature of good user experience; by catching invalid data on the client-side, the user can fix it straight away. If it gets to the server and is then rejected, a noticeable delay is caused by a round trip to the server and then back to the client-side to tell the user to fix their data.

However, client-side validation should not be considered an exhaustive security measure! Your apps should always perform security checks on any form-submitted data on the server-side as well as the client-side, because client-side validation is too easy to bypass, so malicious users can still easily send bad data through to your server. Read Website security for an idea of what could happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind.


Source: Mozilla, https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
Creative Commons License This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.