Prompt before leaving page with vee-validate

Question

Trying to set up a basic "Are you sure you want to leave this page" type prompt on a page containing a simple html form.

Form:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="app">
      <form id="webform" action='#' method='POST' @submit.prevent="doSubmit()">
        <input v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('cust_name_first') }" name="cust_name_first" type="text">
        <span v-show="errors.has('cust_name_first')" class="help is-danger">{{ errors.first('cust_name_first') }}</span>
      </form>
    </div>
    <!-- div id app -->
  </body>
</html>

And the javascript:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.0.9/vee-validate.min.js"></script>
    <script>
        formsubmitval = 1;
        Vue.use(VeeValidate);
        new Vue({
            el: "#app",
            template: '#app',
            data() {
                return {
                    cust_name_first: null,
                    cust_id: null,
                    sales_name_first: null,
                };
            },
            methods: {
                doSubmit() {
                    this.$validator.validateAll().then(function(result){
                        if (!result){
                            //this means a validation failed, so exit without doing anything
                            return;
                        }
                        //here you would put your form submit stuff
                        formsubmitval=0;
                        document.getElementById('webform').submit();
                    });
                }
            }
        });
        if (formsubmitval==1)
        {
            window.onbeforeunload = function(e) {
                e = e || window.event;
                e.preventDefault = true;
                e.cancelBubble = true;
                e.returnValue = 'test';
            }
        }           
    </script>

The problem is that I'm not being prompted to leave the page, and any user entered data is lost. What am I doing wrong with the script above?

If you use vue router it has an in component guard [beforeRouteLeave](https://router.vuejs.org/guide/advanced/navigation-guards.html) for these cases. — Brian Lee, Jul 02 '18 at 19:47

score 0 · Answer 1 · answered Jul 02 '18 at 19:38

I was making this more difficult than it needed to be. Just needed to add onbeforeunload event, and then set it to null when sumbmitting. Works a treat.

Updated javascript:

<script>
    window.onbeforeunload = function() {
        return true;
    };
    Vue.use(VeeValidate);
    new Vue({
        el: "#app",
        template: '#app',
        data() {
            return {
                cust_name_first: null,
                cust_id: null,
                sales_name_first: null,
            };
        },
        methods: {
            doSubmit() {
                this.$validator.validateAll().then(function(result){
                    if (!result){
                        //this means a validation failed, so exit without doing anything
                        return;
                    }
                    //here you would put your form submit stuff
                    window.onbeforeunload = null;
                    document.getElementById('webform').submit();
                });
            }
        }
    });

</script>

Prompt before leaving page with vee-validate

1 Answers1