async-validator avoid validation before submitting form

user_1039488 0
Viewed 1181

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"
>
element-io element-ui vue.js
2 Answers

You could simply do

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

maybe change your rule so you have a trigger inside :

required_blur: {
    required: true, 
    message: "Donnée obligatoire", 
    trigger: 'blur' // When focus changes in the input it triggers
},
required_change: {
    required: true, 
    message: "Donnée obligatoire", // When input's value changes
    trigger: 'change'
},

good luck :)

user_26313600
Related