OnsenUI | Form Handling And Validation

Written by on April 9, 2015

OnsenUI | Form Handling And Validation

Before we can go any further, we need to decide how we’re going to display our messages. In this example, we’re going to style input field border. Unfortunately, an input field is not surrounded by additional content, so we need to do it directly like that.

So how are we going to style it? If at least one field control is invalid this authorizationForm.email.$invalid property is going to be true. Because it’s true and placed inside a ng-class attribute it will now hold a class name has-errors. This class will style a red bottom border indicating an error in a validation. On the other hand, if field controls are valid it will hold a no-errors class styling bottom border green.

We can interpret this:

authorizationForm.email.$invalid

as: Find me a filed named email from a form named authorizationForm and check if it’s invalid. Validation will be checked depending on a these input filed attributes:

ng-minlength="5" ng-maxlength="40" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" required

Note: When working with ng-pattern regex don't forget to enclose your pattern with slashes otherwise you're receive this error: Lexer Error: Unexpected next character at columns 0-0

Application will also show additional textual message below an input field:

<div class="error-container" ng-show="authorizationForm.email.$error" ng-messages="authorizationForm.email.$error" ng-messages-include="error-list.html">
        
</div> 

This div is by default hidden. It will show only if the email field has validation errors (ng-show=”authorizationForm.email.$error”). If error(s) exist, AngularJS will try to connect them to already defined messages inside a template page called error-list.html, one I showed you several paragraph before.

For example, if entered email doesn’t match expected email pattern, it will trigger a requirement ng-message error (ng-messages=”authorizationForm.email.$error”). AngularJS will check included ng-message template page for defined requirement message:

<div class="error" ng-message="pattern">
    <i class="ion-information-circled"></i> 
    Wrong email pattern!
</div>  

At this point, we have an error container (class=”error-container”), error and error message. All of this will result in visible error container filled with an error message found in predefined error template page. Final result will look like this:

<div class="error-container" ng-show="authorizationForm.email.$error" ng-messages="authorizationForm.email.$error" ng-messages-include="error-list.html">
    <div class="error" ng-message="pattern">
        <i class="ion-information-circled"></i> 
        Wrong email pattern!
    </div>         
</div> 

Visually it should look like this:

After a form has been submitted

Click on a button will submit our form. During this process it will trigger defined form ng-submit function. You should also know that ng-submit will prevent the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.

Unfortunately, validations mentioned in the previous section will not trigger during a form validation process. If we want to validate a form before it’s submitted, we will need to add one additional check:

<ul class="list">
  <li class="list__header">Enter an Email Adress</li>
</ul>
<input type="text" 
	   name="email" 
	   value="" 
	   ng-model="authorization.email" 
	   ng-minlength="5" 
	   ng-maxlength="40" 
	   ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" 
	   required 
	   ng-class="{ 'has-errors' : authorizationForm.email.$invalid && authorizationForm.$submitted, 'no-errors' : authorizationForm.email.$valid && authorizationForm.$submitted}" 
	   ng-messages-include="error-list.html" 
	   placeholder="Enter an Email Adress" 
	   class="text-input text-input--underbar" 
	   style="width: 96%; margin: 2%;">

<div class="error-container" ng-show="authorizationForm.email.$error && authorizationForm.$submitted" ng-messages="authorizationForm.email.$error" ng-messages-include="error-list.html">

</div>      

In this case, we’re using one additional check (authorizationForm.$submitted property). This way validation will work only if submit button is clicked.

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



Categories

Leave a Reply