How to clear the validation prompt in element form validation

Problem scenario:

Recently, when developing a project, I encountered such a problem:
When checking the data in the form field, there is one special item. It is not a simple input box, drop-down box or other form elements, but an el-table selection pop-up window written by myself. My check for it is as follows:

protocolId:
   { required: true, message: 'Please select the parsing protocol', trigger: 'blur'},
],

This can realize the verification function, but there will be a problem. If the verification condition (submit button) is triggered and an error message is prompted, the error message will still exist even if the data is reselected later, because the submit button is not clicked again to trigger the verification. This user experience is not very good.

Solution:

1. Check the fields individually

Click the Save button to trigger the validation, which generally validates all fields. form component in element-ui also provides a function to validate a field, which can be used as follows:

this.$refs.addForm.validateField('protocolId', (valid) => {
 	//valid returns the error message written in the rule set. If the conditions are met, the return value is empty if (!valid) {
         return 
     }
 })

The above code can be executed in a function that confirms data selection, so that this special content is checked again. If it meets the verification rules, the error prompt disappears.

2. Directly clear the prompt information of the field under the form field

this.$refs.addForm.clearValidate();

This method is to directly clear the error message without making any judgment. I personally do not recommend it.

This concludes this article on how to clear verification prompts for element form validation. For more information on clearing verification prompts for element form validation, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!