No way to prevent default browser input validation

Currently there doesn’t seem to be any direct way to prevent the browser’s default validation behaviour. eg. when the form contains an input of type=“number” and you enter a non-number string and submit, then in Chrome the validation tooltip will appear on the input.

Standard way to disable this functionality on a normal form, would be to specify the novalidate attribute. This unfortunately doesn’t work with Formsy.Form.

Currently the only workaround I found was to wrap the Formsy.Form element in an outer form tag and specify novalidate there.

<form novalidate>
  <Formsy.Form>...</Formsy.Form>
</form>

But this will probably have some other disadvantages. Would be great if you could support the novalidate attribute! 😃

[twisty]

There’s another case where formNoValidate works:

<Formsy.Form>
   <input type="search" name="q" formNoValidate required />
</Formsy.Form>

I think what happens here is that in a form with a single “texty” type of input, that element also takes the role of the submit button, so formNoValidate applies and native validation is skipped.

In the docs, it maybe worth noting that formsy-react isn’t performing any “special magic”, and provide a link to the html5 spec?

[twisty]

I think @dprentis is right, the formnovalidate attribute is only allowed on submit and image input types. So if it’s present on the default button for the form, native validation is skipped. If formnovalidate is not present on the default button, then a novalidate attribute on the form element comes into play.

From what I can see, adding formNoValidate to other inputs (as shown in the API documentation) has no effect.

Native validation shown:

<Formsy.Form>
   <input name="foo" formNoValidate required />
   <input name="submit" type="Submit" />
</Formsy.Form>

Native validation supressed:

<Formsy.Form>
   <input name="foo" required />
   <input name="submit" formNoValidate type="Submit" />
</Formsy.Form>