Validate only when submit

  • Resolved exlipse

    (@exlipse)


    2 years, 7 months ago

    Hello,
    Normally, if any input is marked as required and you proceed to the next action without entering data into this input (for example, selecting something from the next selectbox), a validation for the inputs is run and error messages appear.
    Is there a way to bypass this situation in some forms and only perform validations when the submit button is clicked?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    2 years, 7 months ago

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

    rakosolapov

    (@rakosolapov)

    2 years, 7 months ago

    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

    https://streamable.com/r96gix

    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 2 years, 7 months ago by rakosolapov.
    • This reply was modified 2 years, 7 months ago by rakosolapov.
    Thread Starter exlipse

    (@exlipse)

    2 years, 7 months ago

    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.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    2 years, 7 months ago

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

    What do you think provokes this user behavior?

    Tactic Marketing

    (@tacticmarketing)

    2 years, 4 months ago

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

    It no longer validates on changing fields only on submit

    cbisteam

    (@cbisteam)

    1 year, 11 months ago

    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

    xsonic

    (@xsonic)

    1 year, 10 months ago

    @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.

    cs181

    (@cs181)

    1 year, 7 months ago

    Try this JS code.

    $('.wpcf7').addClass('novalidate').on('wpcf7invalid', function (e) {
    	this.classList.remove('novalidate');
    });
Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Validate only when submit’ is closed to new replies.