v-if not working for form validation and displaying errors

Question

I'm trying to validate a simple form that contains two fields:

A select box
A file field

If one of the fields aren't filled in, a div (containing an error label) should be rendered next to the corresponding input field.

The problem: My 'error divs' aren't rendered when pushing data to the errors object (if the form is invalid). Please note my console.log statement, that tells me that my error object has a key 'file' and a key 'selectedSupplier'.

Side note: I'm following this example: https://v2.vuejs.org/v2/cookbook/form-validation.html Differences are, that I'd like to show error labels next to the corresponding field and that I'm setting errors in my errors object, instead of a simple array. So what could I be doing wrong?

Thanks.

This is my Main.vue file:

<template>
    <div>
        <form @submit="upload">
            <div class="mb-8">
                <h1 class="mb-3 text-90 font-normal text-2xl">Import Order Csv</h1>
                <div class="card">
                    <div class="flex border-b border-40">
                        <div class="w-1/5 px-8 py-6">
                            <label for="supplier_id" class="inline-block text-80 pt-2 leading-tight">Supplier</label>
                        </div>

                        <div class="py-6 px-8 w-1/2">
                            <select v-model="selectedSupplier" id="supplier_id" name="supplier_id" ref="supplier_id" class="w-full form-control form-input form-input-bordered">
                                <option v-for="supplier in suppliers" v-bind:value="supplier.id">{{ supplier.name }}</option>
                            </select>

                            <div v-if="errors.hasOwnProperty('selectedSupplier')" class="help-text error-text mt-2 text-danger">
                                Required.
                            </div>
                        </div>
                    </div>

                    <div class="flex border-b border-40">
                        <div class="w-1/5 px-8 py-6">
                            <label for="csv_file" class="inline-block text-80 pt-2 leading-tight">File</label>
                        </div>

                        <div class="py-6 px-8 w-1/2">
                            <input id="csv_file" type="file" name="file" ref="file" @change="handleFile">

                            <div v-if="errors.hasOwnProperty('file')" class="help-text error-text mt-2 text-danger">
                                Required.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex items-center">
                <button type="submit" class="btn btn-default btn-primary inline-flex items-center relative">Import</button>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.listSuppliers();
        },
        data() {
            return {
            errors: [],
            file: '',
            suppliers: [],
        };
    },
    methods: {
        checkForm() {
            if (!this.selectedSupplier) {
                this.errors.selectedSupplier = 'Supplier required';
            }

            if (!this.file) {
                this.errors.file = 'File required';
            }
        },
        listSuppliers() {
            const self = this;

            Nova.request()
                .get('/tool/import-order-csv/suppliers')
                .then(function (response) {
                    self.suppliers = response.data.data;
                })
                .catch(function (e) {
                    self.$toasted.show(e, {type: "error"});
                });
        },
        handleFile: function (event) {
            this.file = this.$refs.file.files[0];
        },
        upload: function (event) {
            this.checkForm();

            if (this.errors.hasOwnProperty('selectedSupplier') || this.errors.hasOwnProperty('file')) {
                console.log(this.errors); // this actually shows both errors!
                event.preventDefault();
            }

            const formData = new FormData();
            formData.append('file', this.file);

            formData.append('supplier_id', this.$refs.supplier_id.value);

            const self = this;

            Nova.request()
                .post('/tool/import-order-csv/upload',
                    formData,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                ).then(function (response) {
                    self.$toasted.show(response.data.message, {type: "success"});
                })
                .catch(function (e) {
                    self.$toasted.show(e.response.data.message, {type: "error"});
                });
            }
        }
    }
</script>

you are using errors as object, but in data() you pass an empty array as initial value — Jake Lam
– Jake Lam, Commented Feb 25, 2020 at 9:19

mattyh88 · Accepted Answer · 2020-02-25 09:44:28Z

1

Apparently I had to use v-show instead of v-if, because v-if would be 'lazy' and will not render my error-div when the errors var gets filled.

It's working now, but not 100% sure if this is the best way, as I found another tutorial where v-if is used for form validation.(https://medium.com/@mscherrenberg/laravel-5-6-vue-js-simple-form-submission-using-components-92b6d5fd4434)

answered Feb 25, 2020 at 9:44

mattyh88

1,6555 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Suraj Rao · Accepted Answer · 2021-11-19 14:56:11Z

1

I was getting the same error, this is how I solved the problem,

<div v-if="errors.field1.length > 0 ? true : false"> // true or false

If you fix the code like this it will work

edited Nov 19, 2021 at 14:56

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Nov 19, 2021 at 14:31

yusuftask08

113 bronze badges

1 Comment

Suraj Rao Over a year ago

Select your code and press Ctrl + K to format your code

Jake Lam · Accepted Answer · 2020-02-25 09:47:51Z

0

The reason might because the way you reassign object is not reactive, which not trigger v-if to re-calculate

this.errors.selectedSupplier = 'Supplier required';
this.errors.file = 'File required';

If you still want to use v-if , try change to this approach

this.errors = {...this.errors, selectedSupplier: 'Supplier required' }

this.errors = {...this.errors, file: 'File required' }

answered Feb 25, 2020 at 9:47

Jake Lam

3,4723 gold badges30 silver badges52 bronze badges

Comments

Jordan Kowal · Accepted Answer · 2020-02-25 09:52:36Z

0

The way I handle my errors with VueJS is through lists and their length attribute.

I have an errors object in my data that looks like this:

errors: {
  field1: [],
  field2: [],
}

Then, when I submit the form, I will:

Empty all the lists for the errors (ie clearing the previous errors)
.push() new errors in the right lists (and .push() makes the Vue reactive)

Finally, in my form, my respective errors divs are displayed based on the length of the list:

<div class="error" v-if="errors.field1.length > 0">
    use a v-for to display all the errors from the list
</div>

Hope it helps

answered Feb 25, 2020 at 9:52

Jordan Kowal

1,61413 silver badges21 bronze badges

Collectives™ on Stack Overflow

v-if not working for form validation and displaying errors

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related