Forms and their validation using Semantic UI in Open Event Frontend
A web form acts as a communication bridge that allows a user to communicate with the organisation and vice versa. In the Open Event project, we need forms so users can contact the organisation, to register themselves, to log into the website, to order a ticket or to query for some information. Here are a few things which were kept in mind before we designed forms in the Open Event Frontend Project:
- The forms were designed on the principle of keeping it simple which means that it should ask only for the relevant information which is required in actual.
- They contained the relevant fields ordered in a logical way according to their importance.
- They offered clear error messages instantly to give direct feedback and allow users to make instant corrections.
- The clear examples were shown in the front of the field.
- Proper spacing among the fields was maintained to display proper error messages to the respective form fields.
- The mandatory fields are highlighted using ‘*’ to avoid confusion.
- Proper colour combinations have been used to inform the user about the progress while filling the form. For eg. red for any ‘error or incomplete’ information while green signifies ‘correct’.
- Saving the current data in case the user has to go back to make any corrections later.
- Allowing to toggle through the form using the keyboard.
The above designing principles helped in avoiding the negative user experience while using the forms.
Let’s take a closer look at the form and the form validation in case of purchase a new ticket form on the Orders page in Open Event Front-end application.
Creating a form
Let’s start by writing some HTML for the form:
<form class="ui form" {{action 'submit' on='submit' }}> <div class="ui padded segment"> <h4 class="ui horizontal divider header"> <i class="ticket icon"></i> {{t 'Ticket Buyer'}} </h4> <div class="field"> <label class="required" for="firstname">{{t 'First Name'}}</label> {{input type='text' name='first_name' value=buyer.firstName}} </div> <div class="field"> <label class="required" for="lastname">{{t 'Last Name'}}</label> {{input type='text' name='last_name' value=buyer.lastName}} </div> <div class="field"> <label class="required" for="email">{{t 'Email'}}</label> {{input type='text' name='email' value=buyer.email}} </div> <h4 class="ui horizontal divider header"> <i class="ticket icon"></i> {{t 'Ticket Holder\'s Information'}} </h4> {{#each holders as |holder index|}} <div class="inline field"> <i class="user icon"></i> <label>{{t 'Ticket Holder '}}{{inc index}}</label> </div> <div class="field"> <label class="required" for="firstname">{{t 'First Name'}}</label> {{input type='text' name=(concat 'first_name_' index) value=holder.firstName}} </div> <div class="field"> <label class="required" for="lastname">{{t 'Last Name'}}</label> {{input type='text' name=(concat 'last_name_' index) value=holder.lastName}} </div> <div class="field"> <label class="required" for="email">{{t 'Email'}}</label> {{input type='text' name=(concat 'email_' index) value=holder.email}} </div> <div class="field"> {{ui-checkbox label=(t 'Same as Ticket Buyer') checked=holder.sameAsBuyer onChange=(action 'fillHolderData' holder)}} </div> {{/each}} <p> {{t 'By clicking "Pay Now", I acknowledge that I have read and agree with the Open Event terms of services and privacy policy.'}} </p> <div class="center aligned"> <button type="submit" class="ui teal submit button">{{t 'Pay Now'}}</button> </div> </div> </form>
The complete code for the form can be seen here.
In the above code, we have used Semantic UI elements like button, input, label, icon, header and modules like dropdown, checkbox to create the basic structure of the form.
The form is created using the Semantic markup. Along with semantic UI collection “form”, the segment element has been used to create the grouping of similar content like we have a timer and its related description that after 10 minutes the reservation will no longer be held are put together in a segment where they are arranged using semantic UI view “statistic”. Due to the vastness of semantic UI, all the styling has been done using it like fields inlining, button styling, segment background coloring etc.
The form is created using the Semantic markup. Along with semantic UI collection “form”, the segment element has been used to create the grouping of similar content like we have a timer and its related description that after 10 minutes the reservation will no longer be held are put together in a segment where they are arranged using semantic UI view “statistic”. Semantic UI elements like button, input, label, icon, header and modules like dropdown, checkbox have been used. Due to the vastness of semantic UI, all the styling has been done using it like fields inlining, button styling, segment background colouring etc.
The page for the above HTML code looks like this:
Fig. 1: Order Form to purchase a ticket
The complete form can be seen on this link.
Adding form validations
We can also add validation in HTML format but writing the validation in JavaScript file is considered good practice.
Let’s see how we can add validation to fields in Javascript.
getValidationRules() { let firstNameValidation = { rules: [ { type : 'empty', prompt : this.i18n.t('Please enter your first name') } ] }; let lastNameValidation = { rules: [ { type : 'empty', prompt : this.i18n.t('Please enter your last name') } ] }; let emailValidation = { rules: [ { type : 'empty', prompt : this.i18n.t('Please enter your email') } ] }; let validationRules = { inline : true, delay : false, on : 'blur', fields : { firstName: { identifier : 'first_name', rules : [ { type : 'empty', prompt : this.i18n.t('Please enter your first name') } ] }, lastName: { identifier : 'last_name', rules : [ { type : 'empty', prompt : this.i18n.t('Please enter your last name') } ] }, email: { identifier : 'email', rules : [ { type : 'email', prompt : this.i18n.t('Please enter a valid email address') } ] }, zipCode: { identifier : 'zip_code', rules : [ { type : 'empty', prompt : this.i18n.t('Please enter your zip code') } ] } };
Let’s break this up, first, we have an array of validation rules.
zipCode: { identifier : 'zip_code', rules : [ { type : 'empty', prompt : this.i18n.t('Please enter your zip code') } ] }
The first part zipcode is the identifier in Semantic.
The next bit of the identifier, this can match against either id, name or data-validate attributes on the element. We have here picked up the name which we’re using on our labels.
Next bit of the rules, which is an array of objects defining the type of validation, and the message to prompt the user with.
The second part is the settings:
inline : true, delay : false, on : 'blur',
This part says we want validation to occur on blur, delayed and to be inline. This gives us the following effect:
Fig. 2: Order Form after validation
To summarise the post, one can say we have seen here how the form to purchase the event ticket has been designed, coded and styled. The complete form can be seen on this link and the complete code can be seen here. The entire form has been designed in such a way to keep it simple, clear and trustworthy without losing the user interaction.
References:
You must be logged in to post a comment.