No way to prevent default browser input validation

[dprentis]

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! :)

[dprentis]

Ah, method above doesn't work either, throws:
Uncaught Error: Invariant Violation: findComponentRoot(... etc.

[jcapogna]

As a workaround, you should be able to add novalidate to each of your inputs.

[christianalfoni]

I suggest adding this as a default property on the form. Is there any reason you would not want to have "novalidate"... I mean, the reason you use formsy is to handle custom validation? :-)

[christianalfoni]

Added this now. You can turn it off with: `<Formsy.Form novalidate={false}/> will be part of next release :-) Thanks!

[dprentis]

Wow! thanks for addressing this so fast - I'll check it out :)

[dprentis]

So, got this to work using this:

    <Formsy.Form>
      <Input name="myNumber" />
      <button type="submit" formNoValidate>Update</button>
    </Formsy.Form>

I think the input element has to be a submit button (see w3)

[christianalfoni]

Hi @dprentis,

I did something wrong on first implementation. You should be able to use formNoValidate on the inputs too... the actual native inputs that is :-)

[kristian-puccio]

One thing I've noticed is that if you submit the form by pressing enter the native validation is triggered.

I think we need to be able to pass 'noValidate' to the form element. That way we can catch both the button click or hitting enter.

Even just allowing the prop to be passed down to the form would do the trick.

[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>

[christianalfoni]

Hi guys, sorry for late reply, been in loss of time.

I have not tested this very well. So what you are saying is that if we change documentation to:

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

We are in the clear on this? formNoValidate does the job, though only on the native form element that runs the submit of the form? It being an input or a button?

[twisty]

Yes, that's the way to do it with formNoValidate on a submit button. We should change the docs to show this.

[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]

Also! Maybe we should whitelist the noValidate attribute on the form element?

[christianalfoni]

Jup, I agree, will fix this for next release

[Semigradsky]

@christianalfoni how about just passing all props?

This

    return (
        <form {...this.props} onSubmit={this.submit}>
            {this.traverseChildrenAndRegisterInputs(this.props.children)}
        </form>
    );

instead

    return React.DOM.form({
        onSubmit: this.submit,
        className: this.props.className,
        autoComplete: this.props.autoComplete
      },
      this.traverseChildrenAndRegisterInputs(this.props.children)
    );

[remisture]

@christianalfoni, when are you planning to release a fix for this?

http://stackoverflow.com/questions/31021922/how-to-disable-html5-validation-in-react-using-formsy-react

[e-monson]

I have an input field of type 'number' that I want to be able to accept commas. As far as I can tell, neither 'formNoValidate' on the submit button nor 'noValidate' on the Formsy.Form element works to suppress the default validation in this case.

[christianalfoni]

@e-monson This seems like native behaviour. If you want commas you have to run with your own input where you suppress letters.