1.4.0
Chrome Version 59.0.3071.115 (Official Build) (64-bit)
2.4.2
https://jsfiddle.net/esujevpL/
I am trying to build a form that validates all required fields as soon as the user interacted with the form item and didn't fill out a value. For text inputs, the default trigger is blur and if I focus a required text field and then leave it, the field is marked as having an error. The same thing happens with a date picker. However, blur doesn't seem to work with time pickers. If I open the time picker dropdown and then focus another element without selecting a time, the form item is not marked as dirty. Also, opening a select dropdown and closing it with out selecting anything doesn't trigger validation. Manually setting the trigger to blur doesn't work.
On blur, each field should be marked as having an error
Only the text input and the date picker are flagged as having an error, the time picker and the select don't have errors
I have the same issue
I think perhaps it is caused by not emitting 'el.form.blur' event.
In form-item.vue, when mounted, it listen 'el.form.blur' event and all onFieldBlur:
this.$on('el.form.blur', this.onFieldBlur);
But in select.vue nowhere the event dispatched.
In input.vue, when blur (in handleBlur method), it dispatch 'el.form.blur' event
handleBlur(event) {
this.focused = false;
this.$emit('blur', event);
if (this.validateEvent) {
this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]);
}
}
like @EdmundTheRadiance, the "blur" event doesn't trigger validation on select items
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.