Not able to validate using components vue js my vue js StudentProfileForm.vue
<template>
    <div class="container-fluid">
        <div class="container">
            <div class="row">
                <div class="col-12 col-xs-12 col-md-12 col-lg-12 d-flex justify-content-center">
                    
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-xs-12 col-md-12 col-lg-12">

                    <main>
                        <form method="POST" action="/student/personal-info"  @submit.prevent="onSubmit">
                            <div class="form-header">
                                <h1 class="form-header__title">Personal Info</h1>
                                <p class="form-header__progress">Step 1 of 1</p>
                            </div>
                            <fieldset class="mailing">

                                <label for="fullname">
                                    Full Name
                                    <input  id="fullname" name="fullname" autocomplete="fullname" autocorrect="off" type="text" autofocus v-model="fullname"/>
                                    <span class="alert alert-danger" v-if="errors.get('fullname')"></span>
                                </label>


                                <label for="email">
                                    Email
                                    <input  id="email" name="email" autocomplete="email" autocorrect="off" type="email" v-model="email"/>
                                </label>
                                <label for="address">
                                    Address
                                    <textarea id="address" name="address" dir="auto" v-model="address"></textarea>
                                </label>
                                <label for="contact">
                                    Contact <!--<span class="optional">optional</span>-->
                                    <input id="contact" name="contact" autocomplete="contact" autocorrect="off" type="text" v-model="contact"/>
                                </label>
                                <label for="dob">
                                    Date Of Birth </label>
                                    <input class="form-control"  id="dob" name="dob" autocomplete="dob"  autocorrect="off" type="date" v-model="dob"/>
                                <p></p>
                                <label for="gender">Gender</label>
                                <label for="gender">
                                    Male
                                    <input  id="gender" name="gender" value="Male" autocorrect="off" type="radio" v-model="gender"/>
                                    Female
                                    <input  id="gender" name="gender" value="Female" autocorrect="off" type="radio" v-model="gender"/>
                                    Others
                                    <input  id="gender" name="gender" value="Other" autocorrect="off" type="radio" v-model="gender"/>
                                </label>
                                <p></p>
                                <label for="nationality">
                                    Nationality </label>
                                    <select class="form-control" id="nationality" name="nationality" v-model="nationality">
                                        <option selected disabled>Choose...</option>
                                        <option value="1">India</option>
                                    </select>
                                <p></p>
                                <label for="photo">
                                    Profile Photo </label>
                                    <input  id="photo" name="photo" type="file" @change="onFileChange"/>
                            </fieldset>
                            <input class="btn btn-success mb-5 mt-2" name="submit" type="submit" value="Save and continue" />
                        </form>
                    </main>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    class Errors {

        constructor(){
            this.errors = {};
        }

        get(field){
            if (this.errors[field]) {
                return this.errors[field][0];
            }
        }


        record(errors){
            this.errors = errors;
        }

    }
    export default {



        mounted() {
            console.log('Student Profile Form')
        },



        data() {
            return {
                fullname: '',
                email: '',
                address: '',
                contact: '',
                dob: '',
                gender: '',
                nationality: '',
                photo: '',
                errors: new Errors()
            }

        },

        methods: {
             onFileChange(e){
            //         console.log(e.target.files[0]);
            //         this.photo = e.target.files[0];
               },

                onSubmit() {
                    const fileInput = document.querySelector( '#photo' );
                    const formData = new FormData();
                    formData.append( 'fullname', this.fullname );
                    formData.append( 'email', this.email );
                    formData.append( 'address', this.address );
                    formData.append( 'contact', this.contact );
                    formData.append( 'dob', this.dob );
                    formData.append( 'gender', this.gender );
                    formData.append( 'nationality', this.nationality );
                    formData.append( 'photo', fileInput.files[0] );
                    axios.post( '/student/personal-info', formData )
                        .then(response => alert('Success'))
                        .catch(error => this.errors.record( error.response.data ));

                }


        }
    }
</script>
Object-Oriented Forms: Part 1

Updated Series Available
