Manually invoke HTML5 form validation

Question

I have a legacy form that I'm trying to update to do simple HTML5 form validation.

Currently, it uses reCaptcha, and invokes a verify() function that validates the reCaptcha challenge before forwarding the contents of the form. I would like to ensure that the form passes HTML5 validation before continuing with the reCaptcha processing, and display the appropriate error messages that the browser would use by default.

The iframe containing the form as the <!DOCTYPE html> doctype. The input fields have the required attribute.

The submit button has the following:

<input type="button" id="script_send" onclick="javascript:verify(this.form);" value="ENVIAR">

The verify script has the basic structure.

function verify(theForm) {
    form = theForm;

    /* Recaptcha processing */
}

I tried using

if (!form.checkValidity()) {
    return false;
}

and even though the form was not submitted, I get no errors displayed on the screen, showing the user what fields they should be providing.

I have seen this jsfiddle [http://jsfiddle.net/5ycZz/] used to demonstrate the checkValidity() function, but even that does not display the visual error cues that I would expect to see, in Chrome, IE10 or FF.

SpliFF · Accepted Answer · 2013-11-20 06:19:47Z

3

Try setting the submit event on the form instead of putting a click action on the submit button. The submit event fires AFTER validation so it should only happen if all other constraints passed. This also means you wont have to call form.checkValidity() in your verify function.

<form onsubmit="verify(this)">
...
</form>

answered Nov 20, 2013 at 6:19

SpliFF

39.1k16 gold badges95 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Reuben Over a year ago

I added the onsubmit for the form, and changed the <input> type of the button to be submit. However, the verify function still seems to get invoked before form validation occurs.

SpliFF Over a year ago

Which browser? i've already confirmed it works in FF. Check fiddle: jsfiddle.net/BqW9D . Maybe you forgot to remove your onclick action?

Reuben Over a year ago

Actually, I'm a silly bugger. Didn't realise that the (legacy) form redirected to a different URL (which happened to the be the live site, instead of my development environment). This method certainly works!

Dmitry Shashurov · Accepted Answer · 2019-06-07 16:28:24Z

2

This solving trouble:

if (!form.checkValidity()) {
    form.reportValidity();
    return false;
}

answered Jun 7, 2019 at 16:28

Dmitry Shashurov

1,83221 silver badges15 bronze badges

Collectives™ on Stack Overflow

Manually invoke HTML5 form validation

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related