{"action":"opened","issue":{"url":"https://api.github.com/repos/logaretm/vee-validate/issues/179","repository_url":"https://api.github.com/repos/logaretm/vee-validate","labels_url":"https://api.github.com/repos/logaretm/vee-validate/issues/179/labels{/name}","comments_url":"https://api.github.com/repos/logaretm/vee-validate/issues/179/comments","events_url":"https://api.github.com/repos/logaretm/vee-validate/issues/179/events","html_url":"https://github.com/logaretm/vee-validate/issues/179","id":194680687,"number":179,"title":"Async validation (custom rule) - not preventing form submission","user":{"login":"FilipQL","id":18264428,"avatar_url":"https://avatars.githubusercontent.com/u/18264428?v=3","gravatar_id":"","url":"https://api.github.com/users/FilipQL","html_url":"https://github.com/FilipQL","followers_url":"https://api.github.com/users/FilipQL/followers","following_url":"https://api.github.com/users/FilipQL/following{/other_user}","gists_url":"https://api.github.com/users/FilipQL/gists{/gist_id}","starred_url":"https://api.github.com/users/FilipQL/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FilipQL/subscriptions","organizations_url":"https://api.github.com/users/FilipQL/orgs","repos_url":"https://api.github.com/users/FilipQL/repos","events_url":"https://api.github.com/users/FilipQL/events{/privacy}","received_events_url":"https://api.github.com/users/FilipQL/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-12-09T19:45:05Z","updated_at":"2016-12-09T19:45:05Z","closed_at":null,"body":"#### Versions:\r\n- VueJs: 2.1.3\r\n- Vee-Validate: vee-validate@2.0.0-beta.17\r\n\r\nI have created a custom rule that uses Ajax to check if the same title already exists (title must be unique). The problem is: when this validation fails - the form is not prevented from being submitted.\r\n\r\nI have defined the following custom rule in _resources/assets/js/_**app.js**:\r\n\r\n```\r\nrequire('./bootstrap');\r\n\r\nimport VeeValidate from 'vee-validate';\r\nVue.use(VeeValidate);\r\n\r\nimport { Validator } from 'vee-validate';\r\n\r\nconst checkUnique = {\r\n    getMessage(field) {\r\n        return `Such ${field} already exists.`\r\n    },\r\n    validate(value) {\r\n        if(value) {\r\n            return Vue.http.get('api/todos/exists', {params: { title: value }}).then(function (response) {\r\n                return {\r\n                    valid: response.data.valid\r\n                }\r\n            })\r\n        } else {\r\n            return false;\r\n        }\r\n    }\r\n};\r\n\r\n\r\nValidator.extend('check-unique', checkUnique);\r\n\r\nimport store from './store'\r\n\r\nVue.component('todos-list', require('./components/todos/TodoList.vue'));\r\nVue.component('todos-add', require('./components/todos/TodoAdd.vue'));\r\n\r\nconst app = new Vue({\r\n    el: '#app',\r\n    store\r\n});\r\n```\r\nAs you can see, this rule uses Ajax (vue-resource) to check if the same title already exists in the database (title must be unique).\r\n\r\nIn my component's template (_resources/assets/js/components/todos/_**TodoAdd.vue**) I have applied this rule:\r\n\r\n```\r\n<template id=\"todos-add-template\">\r\n    <div>\r\n        <form @submit.prevent=\"addTodo\" autocomplete=\"off\">\r\n            <div class=\"form-group\">\r\n                <input name=\"title\" v-validate data-vv-rules=\"required|check-unique\" :class=\"{'input': true, 'is-danger': errors.has('title') }\" v-model=\"newTodo.title\" class=\"form-control\" placeholder=\"Add a new Todo\">\r\n                <span v-show=\"errors.has('title')\" class=\"help is-danger\">{{ errors.first('title') }}</span>\r\n            </div>\r\n\r\n            <div class=\"form-group\">\r\n                <button class=\"btn btn-success\">Add Todo</button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</template>\r\n\r\n\r\n<script>\r\n    export default {\r\n        template: '#todos-add-template',\r\n        data() {\r\n            return {\r\n                newTodo: { id: null, title: '', completed: false }\r\n            }\r\n        },\r\n\r\n        methods: {\r\n            addTodo(e) {\r\n                this.$validator.validateAll();\r\n                if (this.errors.any()) {\r\n                    e.preventDefault();\r\n                } else {\r\n                    this.$store.dispatch('addTodo', this.newTodo.title);\r\n                    this.newTodo = { id: null, title: '', completed: false }\r\n                }\r\n            }\r\n        }\r\n    }\r\n</script>\r\n\r\n<style>\r\n    .input.is-danger, .textarea.is-danger {\r\n        border-color: #ff3860;\r\n    }\r\n\r\n    .help.is-danger {\r\n        color: #ff3860;\r\n    }\r\n</style>\r\n```\r\nAs you can see - I prevent form submission:\r\n\r\n`<form @submit.prevent=\"addTodo\" autocomplete=\"off\">`\r\n\r\n...\r\n\r\n```\r\n        methods: {\r\n            addTodo(e) {\r\n                this.$validator.validateAll();\r\n                if (this.errors.any()) {\r\n                    e.preventDefault();\r\n                } else { \r\n                    this.$store.dispatch('addTodo', this.newTodo.title);\r\n                    this.newTodo = { id: null, title: '', completed: false }\r\n                }\r\n            }\r\n        }\r\n```\r\nAnd if works fine with rules that are not Async (custom), but when this rule (`check-unique`) fails - it only prevents form from being submitted for the first click on the form's submit button... BUT if I keep clicking on the submit button - at one moment the form will be submitted.\r\n\r\n![1](https://cloud.githubusercontent.com/assets/18264428/21062246/37c5d1a8-be50-11e6-87da-d367931586f0.png)\r\n\r\n![2](https://cloud.githubusercontent.com/assets/18264428/21062251/3e98d1d8-be50-11e6-8580-54ec68336467.png)\r\n\r\n"}}
{"actor":{"display_login":"FilipQL"}}