I need an easy-to-build Form for my Vue 3 site to help out the kids who haven’t sent me their Christmas letters yet. Please help!
No doubt—seeing this e-mail completely changed our roadmap and put the Christmas Vue Form as our top priority item. Millions of kids and their presents depended on us! Luckily, we were prepared—earlier this year we released the Kendo UI for Vue Native Form component, along with all the needed editors and guidelines on how to use them in order to cover all the fields needed in Santa’s Christmas Form:
In the lines below, I will cover the detailed information on how we created this great Christmas Form for Santa in Vue 3. All the fields are implemented with Kendo Native UI for Vue components and the new purple swatch Kendo Bootstrap theme. All of them are fully accessible, which allowed us to be fully professional in this situation, keeping in mind that so many kids’ dreams were depending on this.
As a starting point, we will import Kendo UI for Vue Form from the ‘@progress/kendo-vue-form’ package. It will wrap and coordinate the state management of the form and its individual fields: whether they are touched, modified, visited, valid or have a different value.
Then we will include one by one all the needed field components. Each of them defines the props that are passed to the editor and the focus, blur and change events that are responsible for the important form related states:
The name field is usually considered the easiest one when creating a form—we just add the usual styled input, right? Yet, in reality it is not that easy. In order to implement it in the form, it has to have the proper label, hint, and a validation so the child doesn’t accidentally leave it blank.
In order to choose the most appropriate present, Santa also needs the date of birth of the child. It can be selected by the DatePicker Kendo component where the year, month and the day can be selected seamlessly by the kids.
The NumericTextBox Kendo component is a perfect match when we need to fill in the age, and the form validation can be appropriately added to avoid the minus values as well.
Choosing the country will help Santa prepare his most optimized Christmas schedule. When a collection of such data is needed, we often need an AutoComplete component where we can type the first letter of the country and then find it in the filtered list. We can add the validation message that will explain why is this field important for Santa.
In these modern times, a parent’s phone is incredibly important if something goes wrong with the Christmas delivery. The best choice for filling in the number is the MaskedTextbox, which will help visually fill in the correct numbers mask.
From here on, the questions become more serious. They are all about the behavior of the kids through the year—were they good or bad? After all, Santa needs to know how well they've been behaving all year.
This is the moment when the kids should be really honest and complete a field about how good they were through the year. The most intuitive form editor for such needs is the Slider that can visually show the number options and the minimum and maximum values that can be selected.
With simple NumericTextBoxes, we can let the children tell Santa how many good and bad deeds they did throughout the year.
To help even more, we can choose the best time to have the present delivered. Here the help is coming from the DateTimePicker component which lets us pick the most appropriate day, hour and minute when Santa and his reindeer will be most welcome onto the child’s rooftop.
Last but not least, the kids should confirm that they have listened to their parents before they submit the form. It is a requirement to be able to send the form to the server in the North Pole.
After having all these fields ready, the form is fully accessible and ready to use. The code and a runnable sample are both available at this StackBlitz example.
Hope this information helps you too when you need a Vue 2 or Vue 3 form. For more similar Vue tips or blogs, you can follow me on Twitter—@pa4oZdravkov.
Merry Christmas and happy Vue coding in the new year!
Subscribe to be the first to get our expert-written articles and tutorials for developers!