05 Jan

Client-side form validation with AngularJS

Many web applications depend on forms to collect user input. However, as a rule, the user cannot be trusted to enter valid input values by himself, so we need a way to control which values the user is allowed to commit. A popular way to do so is via client-side form validation, since it can give immediate feedback about whether the form is valid or not.

With AngularJS, client-side form validation is really simple. The possibilities range from making use of the HTML5 input types and attributes, defining customized angular directives to showing custom error messages.

HTML5 form validation

In HTML5, the <input> tags provide different input types and attributes with which forms can be validated on the client side without having to write any JavaScript functions. These input types comprise types such as “number”, but also more complex types such as “email”, “date” or “url”. If an input type is specified, the browser will not allow user input that does not correspond to that type.

If we want to make sure that the user cannot leave a field empty, we can add the ‘required’ attribute to the input tag. This way, the form cannot be submitted unless all input fields with the ‘required’ attribute are filled in and the browser will notify the user if required data is still missing. For additionally restricting the data format, we can use the ‘min’ and ‘max’ attributes, as is used for the age field in the following example:

AngularJS directive

If we use AngularJS for our web application, we are provided with further instruments to validate user forms. Some of the Angular directives can be used to specify the format of the user data:

On top of that, AngularJS allows us to define our own customized directives. We could, for example, create a directive that validates that an entered username is already contained in the database:

AngularJS Form Properties

Each AngularJS form has certain properties with which we can check the state of the form. These properties can be accessed via formName.inputFieldName.property. To be able to use these properties, all input fields must be given a name.
We can, for example, check the validity of a form with the boolean properties $valid or $invalid and enable or disable the submit button according to that value:

In order to communicate to the user if his or her data is invalid and explain which kind of input is expected instead, we can use the $error property to create customized error messages. With the help of the ng-show directive, we can arrange that the message is only shown when the error in question has actually occurred:

Because both the name and the age are required data, the corresponding error messages are displayed in the empty form:

empty form

After entering a name, the message ‘name is required’ disappears. If we try to enter an age which is outside the specified range, we get another error message:

age out of range

When we finally enter all the required data in the correct format, no error messages are displayed any longer and the ‘Save’ button is enabled:

valid form

Summary

We have learned about some handy tools which enable client-side form validation to be achieved without having to write JavaScript functions. However, we must not forget that even though client-side form validation is good for giving the user instant feedback and thus enhancing the user experience, it can still be bypassed by users with malicious intents. Therefore it is vital for a secure application to validate input data on the server side as well to prevent that potentially dangerous input is processed on the server side.

Share this

Leave a reply