如何使用formsy-react在React中禁用HTML5验证？

Question

我正在尝试使用formy-react来摆脱浏览器的默认验证逻辑,并且根据文档," formNoValidation "属性应该可以解决问题.但我无法让它发挥作用.

我究竟做错了什么？

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>
        );
    }
});

谢谢!

Answer 1

该formNoValidate属性仅适用于提交表单的元素.因此,如果它是表单中的唯一输入(无提交按钮),则将其置于"文本"类型的输入上将起作用.

想象一下,有一个用于撰写文章的表单,它可以有两个提交按钮,一个用于"保存草稿",不需要运行本机验证,另一个用于"发布".

添加noValidate表单标记应该完全禁用表单上的本机验证,但是在解决问题89(计划用于下一个版本)之前,这是不可能的.