Element: [Bug Report] Inconsistent validation triggers for form items

Created on 21 Jul 2017  ·  4Comments  ·  Source: ElemeFE/element

Element UI version

1.4.0

OS/Browsers version

Chrome Version 59.0.3071.115 (Official Build) (64-bit)

Vue version

2.4.2

Reproduction Link

https://jsfiddle.net/esujevpL/

Steps to reproduce

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.

  1. Create a form and add a text input, a select, a date picker and a time picker
  2. Create validation rules that set the values to required
  3. Click / tab through all fields without actually entering any value

What is Expected?

On blur, each field should be marked as having an error

What is actually happening?

Only the text input and the date picker are flagged as having an error, the time picker and the select don't have errors

form stale

All 4 comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Zhao-github picture Zhao-github  ·  3Comments

makunsusu picture makunsusu  ·  3Comments

gengxuelei picture gengxuelei  ·  3Comments

yuchonghua picture yuchonghua  ·  3Comments

yubo111 picture yubo111  ·  3Comments