How to disable HTML5 validation in React using formsy-react?

Question

i'm trying to get rid of the browser's default validation logic using formsy-react, and according to the documentation the "formNoValidation" attribute should do the trick. But I can't get it to work.

What am I doing wrong?

var React = require('React');
var Formsy = require('formsy-react');
var Input = require('./forms/Input.js');

module.exports = React.createClass({
    render: function () {
        return (
           <Formsy.Form>
              <Input ref="phonenumber" id="phonenumber" value={this.state.phonenumber.value} name="phonenumber" required validations="isNumeric" validationError="Please provide a valid phone number" />
           </Formsy.Form>
        );
    }
});

Input.js

var Formsy = require('formsy-react');
var React = require('React');

module.exports = React.createClass({
    mixins: [Formsy.Mixin],

    changeValue: function (event) {
        this.setValue(event.currentTarget.value);
    },

    render: function () {
        var className = this.showRequired() ? 'required' : this.showError() ? 'error' : null;
        var isReadOnly = this.props.readOnly;
        var errorMessage = this.getErrorMessage();

        return (
            <div className={className}>
                <input type="text" onChange={this.changeValue} value={this.getValue()} readOnly={isReadOnly} required={this.isRequired()} formNoValidate />
                <span>{errorMessage}</span>
            </div>
        );
    }
});

Thank you!

Solution 1

The formNoValidate attribute is only intended for elements that submit the form. So, placing it on a "text" type of input will work if it is the only input in the form (no submit button).

Imagine having a form for writing an article, It could have two submit buttons, one for "Save draft" that doesn't need to run native validation, and one for "Publish" that does.

Adding noValidate on the form tag should disable native validation on the form completely, however this isn't possible until issue issue 89 is resolved (scheduled for the next release).

Solution 2

write "novalidate" in form tag.

Example

    <form method="post" novalidate>...</form>

Example

Solution 3

Apparently, this is a way around the problem:

<Formsy.Form>
   <Input ref="phonenumber" id="phonenumber" name="phonenumber" validations="isNumeric" validationError="Oppgi et gyldig telefonnummer"/>
   <input type="submit" formNoValidate value="Submit"/>
</Formsy.Form>

Solution 4

To disable HTML validation, use noValidate, it`s camel case sensitve:

<form onSubmit={this.handleSubmit} noValidate>

// code

</form>

View more solutions

Comments

[Remi Sture]

Unfortunately, "Formsy.Form" doesn't seem to handle that.