Submit button enable and disable in Vue.js

Question

I'm a beginner in coding, want to enable and disable a form once the form got filled. So in my thought I was checking if the validation array is empty it should enable the button else disable this is what I tried. In computed I was checking array is null but disabling the button not able to enable it. Please let me know the problem. Thanks in advance.

<template>
    <div>
        <form 
            @submit.prevent="submitRegistration(); accesTimercount()" 
            v-show="!bakeryRegSuccessMsg"
        >
            <h3>Sign Up Your Bakery with Us</h3>
            <div class="row gtr-uniform">
                <div class="col-6 col-12-xsmall">
                    <input 
                        type="text" 
                        name="bakeryName" 
                        value 
                        placeholder="Bakery Name" 
                        v-model="bakeryname" 
                        autocomplete="off" 
                        required 
                    />
                    <span class="errNotific" v-if="validation.bakeryname">{{validation.bakeryname}}</span>
                </div>
                <div class="col-6 col-12-xsmall">
                    <input 
                        type="text" 
                        name="ownerName" 
                        value placeholder="Owner's Name" 
                        v-model="ownername" 
                        autocomplete="off" 
                        required 
                    />
                    <span class="errNotific" v-if="validation.ownername">{{validation.ownername}}</span>
                </div>   
                <div class="col-6 col-12-xsmall">
                    <textarea 
                        class="boxBorder" 
                        name="description" 
                        placeholder="Write a short description about your Bakery" 
                        rows="3" 
                        v-model="description" 
                        required
                    ></textarea>
                    <span class="errNotific" v-if="validation.description">{{validation.description}}</span>
                </div>                      
                <div class="col-12">
                    <ul class="actions">
                        <li>
                            <input type="submit" value="Register" class="primary" :disabled="btndisable"/>
                        </li>
                        <li>
                            <input type="reset" value="Reset" />
                        </li>
                    </ul>
                </div>
            </div>
        </form>  
</template>

<script>
export default {
    data() {
        return {
            bakeryname: "",
            ownername: "",
            description: "",
            validation: [],
        }
    },

    computed: {
        btndisable: function() {
            return this.validation.length === 0 ? true : false
        }
    },

    methods: {
        // select box getting locations and towns
 
        // API call for Submitting bakery registration

        // form validation call
        
        check_bakeryname(value) {
            if (value == "") {
                this.validation["bakeryname"] = "Enter your bakery name";
            } else {
                this.validation["bakeryname"] = "";
            }
        },
        check_ownername(value) {
            if (value == "") {
                this.validation["ownername"] = "Enter bakery owner's name";
            } else {
                this.validation["ownername"] = "";
            }
        },    
        check_description(value) {
            if (value == "") {
                this.validation["description"] = "please fill the description ";
            } else {
                this.validation["description"] = "";
            }
        }
    },
  
    watch: {
        bakeryname(value) {
            this.bakeryname = value;
            this.check_bakeryname(value);
        },
        ownername(value) {
            this.ownername = value;
            this.check_ownername(value);
        },
        description(value) {
            this.description = value;
            this.check_description(value);
        },
    },
}

Your component is treating validation sometimes like an array (defining it as [], and checking .length) and sometimes like an object (setting description property). First you'll need to get that sorted. — Dan
– Dan, Commented Dec 12, 2020 at 13:55

KienHT · Accepted Answer · 2020-12-14 03:51:11Z

1

The problem is you initialize validation to an empty array: validation = [], then later you use bracket notation to initialize its properties like this:

this.validation["bakeryname"] = "Enter your bakery name"

so the new validation object is created, which is totally different to validation array at the beginning. They are two different types, just like a variable named example will be different to a function named example.

Please check the quick example here I created to demonstrate your issue: http://jsfiddle.net/Kienht/z6qy71dk/5/

Another thing is, the operator here should be !== not ===, because you want to return false if your validation array is empty, so the user will be able to click the button

btndisable: function() {
    return this.validation.length !== 0
}

EDIT

That just helps answer your question to find where the problem is, not the solution. Instead of having 3 different methods for checking validation, you could just need to return a boolean like below, and you don't have to use watch because you use v-model, your values will be dynamically updated as well as your computed property. I could you go simple like this:

<script>
export default {
    data() {
        return {
            bakeryname: "",
            ownername: "",
            description: "",
        }
    },

    computed: {
        btndisable: function() {
            return (!bakeryname || !ownername || !description)
        }
    },
  
}
</script>

edited Dec 14, 2020 at 3:51

answered Dec 12, 2020 at 14:01

KienHT

1,36412 silver badges11 bronze badges

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

3 Comments

mayaj Over a year ago

thank you for your reply.so in my case i have to make my validation array like validation:[bakeryName:""] with all v-models

KienHT Over a year ago

@mayaj I have editted my answer, please have a look

mayaj Over a year ago

@KeinHT,Thanks a lot for your detailed explanation,worked for me

Collectives™ on Stack Overflow

Submit button enable and disable in Vue.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related