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!

Answer 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).