This blog article will illustrate how validations are added to a form in Open Event Frontend, in a standard format. The form to Edit a Speaker is created in the route /event/<event_identifier>/speakers/edit. For the creation of a form an ember component is generated.
| $ ember g component forms/events/view/edit-speaker |
This command results in the generation of:
- An ember component edit-speaker.js to add the validation rules of the form.
- A handlebar edit-speaker.hbs where the HTML code is written.
First the form for editing a speaker is created. All the fields are added.
| <form class=”ui form {{if isLoading ‘loading’}}” {{action ‘submit’ on=’submit’}}>
{{input type=’text’ id=’title’ value=data.name}} {{input type=’text’ id=’email’ value=data.email}} {{widgets/forms/image-upload label=(t ‘Photo’) imageUrl=data.photoUrl icon=’image’ hint=(t ‘Select Photo’) maxSizeInKb=1000}} {{input type=’text’ id=’organisation’ value=data.organisation}} {{input type=’text’ id=’position’ value=data.position}} {{input type=’text’ id=’country’ value=data.country}} {{widgets/forms/rich-text-editor value=data.shortBiography name=’shortBiography’}} {{input type=’text’ id=’website’ value=data.website}} {{input type=’text’ id=’twitter’ value=data.twitter}} <button type=”submit” class=”ui teal submit button update-changes”> |
Then validation rules for the fields included in the form are added in the component. The validations of a form are stored as objects, where the identifier attribute determines which field to apply the validation conditions to. The rules array contains all the rules to be applied to the determined object. Within rules, the type represents the kind of validation, whereas the prompt attribute determines what message shall be displayed in case there is a violation of the validation rule. These validations are in turn implemented by the FormMixin.
| import { protocolLessValidUrlPattern, validTwitterProfileUrlPattern } from ‘open-event-frontend/utils/validators’;
export default Component.extend(FormMixin, { getValidationRules() { |
Then for adding the validation for the URLs of the speaker’s website and his twitter account regular expressions are used. They are used to perform pattern-matching.
| export const validTwitterProfileUrlPattern = new RegExp( ‘^twitter\\.com\\/([a-zA-Z0-9_]+)$’ ); |
| export const protocolLessValidUrlPattern = new RegExp( ‘^’ // user:pass authentication + ‘(?:\\S+(?::\\S*)?@)?’ + ‘(?:’ // IP address exclusion // private & local networks + ‘(?!(?:10|127)(?:\\.\\d{1,3}){3})’ + ‘(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})’ + ‘(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})’ // IP address dotted notation octets // excludes loopback network 0.0.0.0 // excludes reserved space >= 224.0.0.0 // excludes network & broacast addresses // (first & last IP address of each class) + ‘(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])’ + ‘(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}’ + ‘(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))’ + ‘|’ // host name + ‘(?:(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)’ // domain name + ‘(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*’ // TLD identifier + ‘(?:\\.(?:[a-z\\u00a1-\\uffff]{2,}))’ // TLD may end with dot + ‘\\.?’ + ‘)’ // port number + ‘(?::\\d{2,5})?’ // resource path + ‘(?:[/?#]\\S*)?’ + ‘$’, ‘i’ ); |
Resources
- EmberJS Mixins–Official ember documentation: https://guides.emberjs.com/v2.2.0/models
- Kravvitz, Regular Expression Rules: http://forums.devshed.com/javascript-development/493764-regexp-match-url-pattern-post1944160.html#post1944160