Do not validate immediately

[lonix1]

In the original jQuery plugin it was possible to control when validation was activated. By default it would occur on each field's blur (demo).

This library performs validation immediately, i.e. as soon as the user starts typing in a field. That is not standard validation behaviour and leads to poor UX - the user is distracted by validation errors even before submitting the form.

Repro: I wanted to ensure it's not "just me", so:

• I cloned the repo and ran the sample app
• In the "Form 1" sample, type anything into the "Id (42)" field
• Even before submitting, the validation errors are shown

I can identify these modes of activation:

• current behaviour: validation is activated (for each field) immediately as the user types into a field
• on form submit: validation is activated (for all fields) only when the user attempts to submit the form
• on field blur (original plugin's behaviour): validation is activated (for each field) only after a field's first blur
• on field blur with change: validation is activated (for each field) only after a field's blur and where the value was actually changed (to protect against user simply tabbing/clicking through fields without actually changing them)

Is any of this currently possible?

[dahlbyk]

By default it would occur on each field's blur

I believe the intent is still to be as close as we can to a drop-in replacement, so aligning our default with the old library seems reasonable.

I can't think of any reason we wouldn't always want to capture fields' initial value so we can defer validation until that value has changed. We'd still always validate on submit, of course.

Is any of this currently possible

You can specify data-val-event="blur" per field to override:

aspnet-client-validation/src/index.ts

Lines 1042 to 1049 in 2c76d35

	let validateEvent = input.dataset.valEvent;
	if (validateEvent) {
	input.addEventListener(validateEvent, cb);
	}
	else {
	let eventType = input instanceof HTMLSelectElement ? 'change' : 'input';
	input.addEventListener(eventType, cb);
	}

We can take a closer look at how the old library can be customized, but in the short term we could pretty easily support bootstrapping with { fieldValidationEvent: 'blur' } override for all fields.

Thoughts?

[lonix1]

Thanks!

capture fields' initial value so we can defer validation until that value has changed

Yes I did something similar - I saved the initial value to a data attribute, e.g. data-original="foo" for each field, on document ready.

You can specify data-val-event="blur" per field to override

I was able to delete so many kludges and workarounds because of that feature. Thanks! I've lodged a docs PR to expose it.

bootstrapping with { fieldValidationEvent: 'blur' } override for all fields

Although that would be nice, but data-val-event="blur" is probably good enough for now.

But deferring validating until the field is actually dirty would be a good addition. Without that, some ugly workarounds are still necessary.

I haven't written TypeScript in years, so I can't help there, but maybe someone will stumble on this issue for the same reason and help out. Just ping me to get involved and help with testing / documenting, etc.

[haacked]

Was this addressed in #110?

[dahlbyk]

Was this addressed in #110?

I don't think so