如何使用 Formsy-react 在 React 中禁用 HTML5 验证？答案

【问题标题】：How to disable HTML5 validation in React using formsy-react?如何使用 Formsy-react 在 React 中禁用 HTML5 验证？
【发布时间】：2015-06-24 08:49:11
【问题描述】：

我正在尝试使用 formsy-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>
        );
    }
});

谢谢！

【问题讨论】：

在您的示例中，您显示了一个带有单个 Input 元素的表单。但是，在您的屏幕截图中，您似乎正在渲染表单中的其他元素。如果只有一个元素，它将成为提交表单的默认控件，因此 formNoValidate 起作用。 github.com/christianalfoni/formsy-react/issues/…
代码示例只是精简了。我有几个输入元素。
formNoValidate 属性适用于提交表单的元素。仅当它是表单中的唯一输入时，将其放在“文本”类型的输入上才会起作用，因为它成为提交表单的输入。

标签： javascript html reactjs html5-validation

【解决方案1】：

formNoValidate 属性仅适用于提交表单的元素。因此，如果它是表单中的唯一输入（没有提交按钮），则将其放在“文本”类型的输入上将起作用。

假设有一个用于撰写文章的表单，它可能有两个提交按钮，一个用于“保存草稿”，不需要运行本机验证，一个用于“发布”，需要。

在表单标签上添加noValidate 应该会完全禁用表单上的本机验证，但是在解决问题issue 89 之前这是不可能的（计划在下一个版本中发布）。

【讨论】：

【解决方案2】：

在表单标签中写上“novalidate”。

例子

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

Example

【讨论】：

不幸的是，“Formsy.Form”似乎无法处理这个问题。

【解决方案3】：

显然，this is a way 解决了这个问题：

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

【讨论】：

【解决方案4】：

要禁用 HTML 验证，请使用 noValidate，它区分大小写：

<form onSubmit={this.handleSubmit} noValidate>

// code

</form>

【讨论】：