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.

Validation

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 contact data object.

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.

User Feedback

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 props.

Indicate when:

• Submission is successful
• Validation fails