Simple Form Request Send VueJs Example

In this post, You will learn how to send a form request to the server and how to manage that response form send request.

In this example I have taken a simple bootstrap form and taking user some details like name, email, mobile, address, address1, gender, city, state, zip etc...

This form also covered most of input methods in Vue form, If you have any queries regarding single input also this post will help you form this example.

To send a request using API, I have saved an npm fro Axios for send API POST request. Axios is a power full API AJAX response gets and send tool you can easily install in vue project and easy to use.

To send form request and received a response form the API, I have form OBJECT inside the data object and take default empty string in every variable form input.

The important thing is: Validation is an important part of the save data method.

You can see there validation errors in how I am pushing each field validation. Using map function i am checking each field valid length if zero then errors will push inside this.errors.

Using map function I have validating easy field and if found any error this will show to request field. If the error array length will be 0 lengths that means all fields fallible and ready to send the request.

So once I click to submit form button save data method will fire and send a request to the dummy post request API.

So this is the simple form request send API. If response status 201 code then will show a success message to the top of the form and the form object will empty.

Here below working example, You check take references and apply in your vue project.

<template>
    <div class="container border border-success p-2 mt-5">
        <div v-if="errors.length">
            <ul>
                <li v-for="(error,index) in errors" :key="index" style="color:red">{{error}}</li>
            </ul>
        </div>
        <div class="alert alert-success" v-if="success.length">{{ success }}</div>
        <form>
            <div class="form-group">
                <label for="name">Name: </label>
                <input type="text" class="form-control" id="name" placeholder="Name" v-model="form.name">
            </div>
            <p></p>
            <div class="form-group">
                <label for="email">Email: </label>
                <input type="email" class="form-control" id="email" placeholder="Email" v-model="form.email">
            </div>
            <p></p>
            <div class="form-group">
                <label for="mobile">Mobile: </label>
                <input type="text" class="form-control" id="mobile" placeholder="Mobile" v-model="form.mobile">
            </div>
            <p></p>
            <div class="form-group">
                <label for="password">Password: </label>
                <input type="password" class="form-control" id="password" placeholder="Password" v-model="form.password">
            </div>
            <p></p>
            <div class="form-group">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="gender" id="male" value="Male" v-model="form.gender" checked>
                    <label class="form-check-label" for="male">Male</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="gender" id="female" value="Female" v-model="form.gender"> 
                    <label class="form-check-label text-nowrap" for="female">Female</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="gender" id="other" value="Other" v-model="form.gender">
                    <label class="form-check-label text-nowrap" for="other">Other</label>
                </div>
            </div>
            <p></p>
            <div class="form-group">
                <label for="address1">Address: </label>
                <input type="text" class="form-control" id="address1" placeholder="1234 Main St" v-model="form.address">
            </div>
            <p></p>
            <div class="form-group">
                <label for="address2">Address 2: </label>
                <input type="text" class="form-control" id="address2" placeholder="Apartment, studio, or floor" v-model="form.address1">
            </div>
            <p></p>
            <div class="form-group">
                <label for="city">City: </label>
                <input type="text" class="form-control" id="city" v-model="form.city">
            </div>
            <p></p>
            <div class="form-group">
                <label for="state">State: </label>
                <select id="state" class="form-control" v-model="form.state">
                    <option selected>Choose...</option>
                    <option v-for="(state,index) in states" :key="index">{{ state }}</option>
                </select>
            </div>
            <p></p>
            <div class="form-group">
                <label for="inputZip">Zip: </label>
                <input type="text" class="form-control" id="inputZip" v-model="form.zip">
            </div>
            <p></p>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="gridCheck" v-model="form.check">
                    <label class="form-check-label" for="gridCheck">
                        Check me out
                    </label>
                </div>
            </div>
            <br>
            <button class="btn btn-primary" @click="saveData">Save</button>
        </form>
    </div>
</template>

<script>
 
export default {
    
    name:'Form',

    data(){
        return {
            states:[
                "Arunachal Pradesh",
                "Assam",
                "Bihar",
                "Chhattisgarh",
                "Goa",
                "Gujarat",
                "Haryana",
                "Himachal Pradesh",
                "Jammu and Kashmir",
                "Jharkhand",
                "Karnataka",
                "Kerala",
                "Madhya Pradesh",
                "Maharashtra",
                "Manipur",
                "Meghalaya",
                "Mizoram",
                "Nagaland",
                "Odisha",
                "Punjab",
                "Rajasthan",
                "Sikkim",
                "Tamil Nadu",
                "Telangana",
                "Tripura",
                "Uttarakhand",
                "Uttar Pradesh",
                "West Bengal",
            ],
            form:{
                name:'',
                email:'',
                mobile:'',
                password:'',
                address:'',
                address1:'',
                city:'',
                state:'',
                zip:'',
                check:false,
                gender:'Male'
            },
            errors:[],
            success:'',
        }
    },

    methods:{
        
        saveData(event){

            this.errors = [];
            
            event.preventDefault(),
            
            // FORM VALIDATION
            Object.keys(this.form).map((item) => {

                this.success = '';

                if(! this.form[item].length && item != 'check'){

                    this.errors.push('The '+ item + ' field is required.')
                }

                if(item == 'check' && this.form[item] == false){

                    this.errors.push('Please allow check.')
                }
            });

            // SEDN POST REQUEST
            if (!this.errors.length) {

                this.errors = [];
                
                this.axios.post('https://reqres.in/api/user',this.form).then((response) => {
                    if(response.status == 201){
                        this.form = []
                        this.success = 'User successfully created.'
                    }
                })
            }
        }
    }
}

</script>

<style scoped>

</style>

Form Preview :

Thanks for reading our post.

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)