Validate only when submit

No, there isn’t. Just for reference, can you tell us why you want to do so?

Joining the thread, i think it should be an option to disable validation until the submit – on my forms there are *required marks already, i don’t want to treat my client as stupid, i believe he sees the *required marks.

With custom input number type field incrementor i’m experiencing a validation bug, see the video

custom incrementor code looks like this:

<button onclick="this.parentNode.querySelector('.incrementor').stepDown()">-</button>
  [number division-spots class:incrementor min:1 "1"]
<button onclick="this.parentNode.querySelector('.incrementor').stepUp()">+</button>

• This reply was modified 1 year, 2 months ago by rakosolapov.
• This reply was modified 1 year, 2 months ago by rakosolapov.

Normally there is a habit of filling the form starting from the first element. this is normal. But sometimes users select the selectbox or radio or checkbox option first. When this operation is performed, it is disturbing for the user experience that a warning appears for items marked as “required” in previous inputs. We have already indicated that it is required with a “*” sign. and we may not want to show annoying warnings to the user while they are still filling out the form before they have even pressed the submit button.

But sometimes users select the selectbox or radio or checkbox option first.

What do you think provokes this user behavior?

For me adding class:novalidate to all required fields sorted the issue.

It no longer validates on changing fields only on submit

I fixed it with change css:

form[data-status="init"] .wpcf7-not-valid-tip{
display: none;
}

Then, it won’t validate until the user clicks submit

@takayukister , showing validation errors immediately versus showing them on submit is a highly debated topic in UX research and depends heavily on the use case.

It also creates unwanted effects with autofilling forms. Consider a form like this:

—————————–

[name]
[email]

[profession]
[years-of-experience]
[…some other job related fields.. maybe it’s an application form…]

[city]

—————————–

The user clicks in [name] and it autofills name, email and city, but then all fields in between will become red, which is no good UX. If it’s live validation, an error should only appear in fields the user actually touched.

Please consider adding an option to disable this behaviour.

Try this JS code.

$('.wpcf7').addClass('novalidate').on('wpcf7invalid', function (e) {
	this.classList.remove('novalidate');
});