Vuevalidate async validation results to a loop

Question

i have the following in my vuevlidate

      validations: {
        user_form: {
            email: {required,email, isUnique(value) {
                    // standalone validator ideally should not assume a field is required
                    if (value === '') return true;
                    // simulate async call, fail for all logins with even length
                    return new Promise((resolve, reject) => {
                       this.$http.post("v1/user-management/users/email-registeredi",{email:value}).then((res)=>{
                            console.log("res is ", res);
                            resolve(true);
                        },(err)=>{
                            reject(false)
                        })
                    })
                }},
            role: {required},
            password: {required}
        }
    },

The above creates an endless loop of http requests especially when it gets an error

Where am i going wrong

An endless loop of http requests implies that the `isUnique` function is called endlessly. I can't reproduce that with this [demo](https://codesandbox.io/s/4083p7r1o4). Can you edit the demo to reproduce the issue? — tony19, Sep 11 '18 at 00:46

Helping hand · Answer 1 · 2018-09-06T13:33:46.363

In case vue validate is not handling reject promise well and creating infinite loop.
You can try, async await for Vue validate's isUnique with try and catch returning false on error,
something like this.

validations: {
 user_form: {
  email: {
    required,
    email,
    async isUnique (value) {
        if (value === '') return true
        try{
          const response = await this.$http.post("v1/user-management/users/email-registeredi",{email:value})
          return true;
        }
        catch(e){
          return false;
        }   
      }
   }
 }

score 0 · Answer 2 · answered Sep 13 '18 at 12:33

You don't need to use "new Promise" because vue-resource already do that. Try this:

validations: {
    user_form: {
        email: {required,email, isUnique(value) {
                // standalone validator ideally should not assume a field is required
                if (value === '') return true;
                // simulate async call, fail for all logins with even length

               return this.$http.post("v1/user-management/users/email-registeredi",{email:value}).then((res)=>{
                    console.log("res is ", res);
                    return true;
                },(err)=>{
                    return false;
                });
            }},
        role: {required},
        password: {required}
    }
},

Vuevalidate async validation results to a loop

2 Answers2