-
Notifications
You must be signed in to change notification settings - Fork 437
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
No way to prevent default browser input validation #89
Comments
Ah, method above doesn't work either, throws: |
As a workaround, you should be able to add novalidate to each of your inputs. |
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? :-) |
Added this now. You can turn it off with: `<Formsy.Form novalidate={false}/> will be part of next release :-) Thanks! |
Wow! thanks for addressing this so fast - I'll check it out :) |
So, got this to work using this:
I think the input element has to be a submit button (see w3) |
Hi @dprentis, I did something wrong on first implementation. You should be able to use |
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. |
I think @dprentis is right, the From what I can see, adding Native validation shown:
Native validation supressed:
|
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? |
Yes, that's the way to do it with |
There's another case where <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 In the docs, it maybe worth noting that formsy-react isn't performing any "special magic", and provide a link to the html5 spec? |
Also! Maybe we should whitelist the |
Jup, I agree, will fix this for next release |
@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)
); |
@christianalfoni, when are you planning to release a fix for this? |
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. |
@e-monson This seems like native behaviour. If you want commas you have to run with your own input where you suppress letters. |
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.
But this will probably have some other disadvantages. Would be great if you could support the novalidate attribute! :)
The text was updated successfully, but these errors were encountered: