如何使用 formsy-react 在 React 中禁用 HTML5 验证?
How to disable HTML5 validation in React using formsy-react?
我正在尝试使用 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>
);
}
});
谢谢!
在表单标签中写入"novalidate"。
示例
<form method="post" novalidate>...</form>
显然,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>
formNoValidate
属性仅适用于提交表单的元素。因此,如果它是表单中唯一的输入(没有提交按钮),将它放在 "text" 类型的输入上将起作用。
假设有一个用于撰写文章的表单,它可以有两个提交按钮,一个用于 "Save draft",不需要 运行 本机验证,一个用于 "Publish"确实如此。
在表单标签上添加 noValidate
应该会完全禁用表单上的本机验证,但是在问题 issue 89 解决(计划在下一个版本中)之前这是不可能的。
要禁用 HTML 验证,请使用 noValidate,它区分大小写:
<form onSubmit={this.handleSubmit} noValidate>
// code
</form>
我正在尝试使用 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>
);
}
});
谢谢!
在表单标签中写入"novalidate"。
示例
<form method="post" novalidate>...</form>
显然,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>
formNoValidate
属性仅适用于提交表单的元素。因此,如果它是表单中唯一的输入(没有提交按钮),将它放在 "text" 类型的输入上将起作用。
假设有一个用于撰写文章的表单,它可以有两个提交按钮,一个用于 "Save draft",不需要 运行 本机验证,一个用于 "Publish"确实如此。
在表单标签上添加 noValidate
应该会完全禁用表单上的本机验证,但是在问题 issue 89 解决(计划在下一个版本中)之前这是不可能的。
要禁用 HTML 验证,请使用 noValidate,它区分大小写:
<form onSubmit={this.handleSubmit} noValidate>
// code
</form>