2

i'm using Vue.js and Element Ui libraries for my project. I have front-end based validation with some rules. But i also need to implement display errors (for current field) from backend. When the form is sent and backend returns error it looks like this:

[
  {"message": "email address is invalid", "path": ["email"]},
  {"message": "example error for password field", "path": ["password"]}
]

where path is field name based on my form field model.

I created some extra element that displays error from backend as you can see in my fiddle. But i would like to use vue element ui validation. So backend errors should be displayed the same way as front-end messages. I can't figure out how to do this.

Here is my fiddle: https://jsfiddle.net/ts4Lfxb6/

Form code looks like this:

<el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="top">
      <el-form-item label="Email" prop="email">
        <el-input v-model="loginForm.email" :disabled="formProcessing" ref="loginInput"></el-input>
        <p v-if="isErrorForField('email', errors)">{{ getErrorForField('email', errors) }}</p>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input v-model="loginForm.password" :disabled="formProcessing" type="password"></el-input>
        <p v-if="isErrorForField('password', errors)">{{ getErrorForField('password', errors) }}</p>
      </el-form-item>
      <el-form-item>
        <div class="submit-wrapper">
          <el-button type="primary" @click="submit('loginForm')" :loading="formProcessing">Log in</el-button>
        </div>
      </el-form-item>
    </el-form>

And Full component is here:

var Main = {
  data() {
    return {
      loginForm: {
        email: '',
        password: ''
      },
      rules: {
        email: { required: true, message: 'Required', trigger: 'change' },
        password: { required: true, message: 'Required', trigger: 'change' }
      },
      formProcessing: false,
      errors: []
    }
  },
  methods: {
    isErrorForField (field, errors) {
      if (!errors && !errors.length) {
        return false
      }
      let filtered = errors.filter(error => {
        return error.path[0] === field
      })
      if (filtered.length) {
        return filtered
      }
    },
    getErrorForField (field, errors) {
      if (!errors && !errors.length) {
        return false
      }
      let filtered = errors.filter(error => {
        return error.path[0] === field
      })
      if (filtered.length) {
        return filtered[0].message
      }
    },
    supportGlobalErrorMessage () {
      this.errors.forEach(error => {
        if (!error.path.length) {
          this.$message({
            message: error.message,
            type: 'error'
          })
        }
      })
    },
    submit (formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false
        }
        this.formProcessing = true
        // send data to backend
        // error response looks like this:
        let errors = [
          {"message": "email address is invalid", "path": ["email"]},
          {"message": "example error for password field", "path": ["password"]}
        ]
        setTimeout(() => {
            this.formProcessing = false
          this.errors = errors
          this.supportGlobalErrorMessage()
        }, 500)
      })
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Can someone help?

Improve this question

1 Answer 1

Reset to default
2

Made the following changes to your code:

var Main = {
  data() {
    return {
      loginForm: {
        email: '',
        password: ''
      },
      rules: {
        email: {
          required: true,
          //validator: this.customValidator,
          //trigger: 'blur'
        },
        password: {
          required: true,
          //validator: this.customValidator,
          //trigger: 'blur'
        }
      },
      formProcessing: false,
      errors: []
    }
  },
  methods: {
    customValidator(rule, value, callback) {
      console.log(rule)
      if (!value) {
        callback(new Error('The field is required'))
      }
      let errors = [{
          "message": "email address is invalid",
          "path": ["email"]
        },
        {
          "message": "example error for password field",
          "path": ["password"]
        }
      ]
      setTimeout(() => {
        this.errors = errors

        if (this.isErrorForField(rule.fullField, this.errors)) {
          callback(new Error(this.getErrorForField(rule.fullField, this.errors)))
        }
        callback()
      }, 500)
    },
    isErrorForField(field, errors) {
      if (!errors && !errors.length) {
        return false
      }
      let filtered = errors.filter(error => {
        return error.path[0] === field
      })
      if (filtered.length) {
        return filtered
      }
    },
    getErrorForField(field, errors) {
      if (!errors && !errors.length) {
        return false
      }
      let filtered = errors.filter(error => {
        return error.path[0] === field
      })
      if (filtered.length) {
        return filtered[0].message
      }
    },
    supportGlobalErrorMessage() {
      this.errors.forEach(error => {
        if (!error.path.length) {
          this.$message({
            message: error.message,
            type: 'error'
          })
        }
      })
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false
        }
        this.formProcessing = true
        // send data to backend
        // error response looks like this:
        let errors = [{
            "message": "email address is invalid",
            "path": ["email"]
          },
          {
            "message": "example error for password field",
            "path": ["password"]
          }
        ]
        setTimeout(() => {
          this.errors = errors
          this.formProcessing = false
          this.supportGlobalErrorMessage()
        }, 500)
      })
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="top">
    <el-form-item label="Email" prop="email" :error="getErrorForField('email', errors)">
      <el-input v-model="loginForm.email" :disabled="formProcessing" ref="loginInput"></el-input>
      <!-- <p v-if="isErrorForField('email', errors)">{{ getErrorForField('email', errors) }}</p> -->
    </el-form-item>
    <el-form-item label="Password" prop="password" :error="getErrorForField('password', errors)">
      <el-input v-model="loginForm.password" :disabled="formProcessing" type="password"></el-input>
      <!-- <p v-if="isErrorForField('password', errors)">{{ getErrorForField('password', errors) }}</p> -->
    </el-form-item>
    <el-form-item>
      <div class="submit-wrapper">
        <el-button type="primary" @click="submit('loginForm')" :loading="formProcessing">Log in</el-button>
      </div>
    </el-form-item>
  </el-form>
</div>

The validator property in the rules attribute can set a custom validation rule which receive three parameters (rule, value, callback).

rule: The validation rule in the source descriptor that corresponds to the field name being validated. It is always assigned a field property with the name of the field being validated.

value: The value of the source object property being validated.

callback: A callback function to invoke once validation is complete. It expects to be passed an array of Error instances to indicate validation failure. If the check is synchronous, you can directly return a false or Error or Error Array.

So, you can get the data from the backend and process it, and then display the error message through the callback.

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

4 Comments

Thats almost what i want. Just one more question, how to display message "The field is required" when there is no value in the field? If there is some value and form is sent that should work just like in your example. Of course, if the backend return error. Thanks.
@Marek Edited :) check it~
Thanks, but i still cant figure out how to show backend errors only when form is submitted, can you help?
@Marek ok. set error attribute and the field will validate error and show this message immediately

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.