VueJS Challenge - Bronze¶
Extend the form¶
Add a phone number field to the form, you will need to add a new data property to the
contact object and bind it
to an input using
v-model in the template to allow the data to be mutated.
Your validation logic should fire when the submission method is called.
To achieve the checking of the
required fields in this challenge - check for an empty string or null on the
You need to place your validation logic in a separate method to keep your code clean.
You will need to add the missing phone number field, this also requires basic
required validation to be in place.
Displaying the current application status to the user is important, when there is a validation error or issue with the server. If the user is not notified or given some kind of feedback they will not know if anything is working.
Display a message at the top of the form which gives feedback to the user, there does not need to be any detail around errors themselves.
You will need to create a new component and register it inside the
Form component. This new component will handle the display
of the notification message at the top of the form and will accept incoming data using
- Submission is successful
- Validation fails