Is there a simple way to trigger form validation onSubmit instead of onLoad with bootstrap and Vue.Js?

Question

I have a Password reset form which is initially empty of course, and I want to validate at submit that none of the fields is empty. I'm doing the following for each field:

    <b-form-group id="currentPassword" 
              label="Old password"
              :invalid-feedback="oldPasswordFeedback">
        <b-form-input id="password" 
                      v-model="passwords.currentPassword" 
                      placeholder="Enter your old Password" 
                      type="password"  
                      maxlength="60" 
                      required/>
    </b-form-group>

and the form is defined like this

  <b-form validated="" id="passwordChangeForm" @submit.prevent="changePassword" class="container-fluid">

The problem is that whenever I navigate to the page, all fields are marked invalid by default and displaying their error messages since they are empty. I want the validation to take place when I submit the form. Is there a simple way to do that without having to install extra validation plugins?

Answer 1

In your component declaration you have set required attribute which try to validate your form when you come to load your page, so you could take advantage of Vue.js and create req property in your data object which is initially set to false .

I'm providing the following simplified example to show you how to do that

 new Vue({ el: '#app', data() { return { item:'', currentPassword:'', req:false } }, methods: { changePassword: function() { this.req=true; } } });

 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" /> <!-- Add this after vue.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <div id="app" class="container"> <div> <b-form validated="" id="passwordChangeForm" @submit.prevent="changePassword" class="container-fluid"> <b-form-group id="currentPassword" label="Old password"> <b-form-input id="password" v-model="currentPassword" placeholder="Enter your old Password" type="password" :required="req" /> </b-form-group> <b-button type="submit" variant="primary">Submit</b-button> </b-form> </div> </div>