Vue: Native client-side validation
A simple and efficient way to validate your data
In this brief article, I’m gonna show you some simple and useful tips to perform client-side validation in a Vue application using only JavaScript and HTML5. Throughout the text, we’ll see how that may help us to achieve a lighter project cutting off unnecessary dependencies.
Client-side validation provides a quick way to respond the user once that doesn’t require any traffic through the network — everything is executed at the client itself. It also give us performance improvements, setting free the server to perform other tasks. Overall the validation process tries to ensure the following items:
- Are the fields filled?
- Are the data valid?
Another important benefit of the validation is that it may prevent your application stays in some undesirable state, the famous crashes.
The advent of HTML5 has transformed such process in something easier to handle by means of the introduction of constraint validation mechanism. Such mechanism adds new semantics types to the HTML elements. Here, the goal is facilitate the content checking in the application without requiring JavaScript for simple validation cases. For instance, a field may be defined as numeric and its maximum and minimum values declared using:
Above, the field will have a semantic value just for numeric inputs between 0 and 100.
The cool is when we specify a numeric input containing type=”number”, the browser will ignore any other non-numeric character due the presence of “type” constraint. We could also use the constraint type=”email” to validate an email formation without any code.
In the next step, let’s add the following CSS rule that will decorate our field applying a red border if its content is not filled.
Basically the rule above applies a border to all not filled inputs that are defined as required and which have an invalid content. Let’s check the result:
The article focus isn’t approach all existing constraints, thus I leave here some good references so that you can check it out: w3schools and developer.mozilla.
Going ahead…
So that our stylization works with a little more advanced validation, we need to use some constraint pattern that allows to add an regular expression to ensure the input’s content validity. If some input has the “required” and “pattern” constraints defined, our CSS code will be applied according the regex evaluation defined into “pattern” constraint.
Let’s see one more example:
In the snippet above, the input was defined to accept currency values containing up to two decimal places using a dot as separator. Case the expression wrote in “pattern” be evaluated as false, our CSS style will be applied signaling the inconsistency.
JavaScript in action
So far, we are able to show to the user when a required input is or not filled through the CSS. As things become complex, the HTML alone isn’t able to execute our validations. We will need to get more power applying the JavaScript and HTML5 resources.
In these situations, whether for lack of knowledge or omission, most of developers bypass the fact that is possible to perform the client-side validation using the good old JavaScript, into a simple and objective way without third parts, without new dependencies inside your project. The JavaScript provide us the test() and checkValidity() methods to evaluate regular expressions and inspect if a field is in compliance with its constraints respectively. The test() method is used widely in the regular expressions checks due be independent of HTML constraints. To demonstrate the usage of test() and checkValidity(), I gonna use a extremely simple struct based on Vue JS environment. Although, you can use any framework you want or even pure JavaScript. :D
Performing with checkValidity()
Let’s say we have an input that accepts currency values according with the regex defined previously. Right now, see how we could to define a template and use checkValidity() method to check its content.
We could also disable the refresh button while the input value was invalid and thus avoid to the user get some frustration when it was clicked.
Warm the engines and let’s do it!
The first step is use formValidate() as a computed method and to include the disabled clause to the our button according the code bellow:
In doing that, we will improve the user experience level.
Using the code above, we will ensure setItem() method will be triggered only if this.value satisfies all conditions established in its constraints. The $refs attribute allows to select DOM elements by the Vue through the provided key, that is, “input-value” in the our example. That’s the same idea behind of the getElementById() provided by JavaScript.
Performing with test()
Now let’s build the same code, but using test() instead of ckeckValidity().
Both methods are similar and can be used interchangeably.
At this point, is import to highlight that, despite efficient, the client-side validation does not replace the server side validation. These last validation is crucial and should be implemented to ensure a greater integrity e security for our applications. Remember: malicious users may easily,through some script, send bad data to the server.
Did you noticed how simple and convenient is use our own JavaScript code to do client-side validations?
I hope the little article may contribute at your projects.
That is all folks, see you next article!
References
MONZILLA. Constraint validation. Available at: <https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation/> Accessed November 10 2018.
