Search code examples
vue.jselement-ui

async-validator avoid validation before submitting form

I use async-validator combined with element-ui.

I would like to execute validation only on submitting form (which actually I do in code).

When using trigger: 'change' in the rules definition, if I leave a filed with a value which does not comply with the rule, I get an error message:

name: [
  { required: true, message: 'Required field', trigger: 'blur' },
  { min: 5, message: 'Name should have at least 5 letters\n', trigger: 'change' }
],

enter image description here

When using trigger: 'blur', I get an error message even before I leave the field:

name: [
  { required: true, message: 'Required field', trigger: 'blur' },
  { min: 5, message: 'Name should have at least 5 letters\n', trigger: 'blur' }
],

enter image description here

I tried to use validate-on-rule-change, but it doesn't help:

<el-form ref="addressForm" :inline="true"
         :model="formData" :rules="addressRules" class="demo-form-inline"
         :validate-on-rule-change="false"
>
Solution

  • You could simply do

    name: {
    required: true, 
    message: "Please enter name ", 
    trigger: 'submit' // Only triggers when $refs.form.validate() is called
},