diff --git a/README.md b/README.md index bb9e535263..348ca26a4c 100644 --- a/README.md +++ b/README.md @@ -65,6 +65,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i - [Custom descriptions](#custom-descriptions) - [Form data validation](#form-data-validation) - [Live validation](#live-validation) + - [HTML5 validation](#html5-validation) - [Custom validation](#custom-validation) - [Error List Display](#error-list-display) - [Styling your forms](#styling-your-forms) @@ -1137,6 +1138,10 @@ Be warned that this is an expensive strategy, with possibly strong impact on per To disable validation entirely, you can set Form's `noValidate` prop to `true`. +### HTML5 Validation + +By default, required field errors will cause the browser to display its standard HTML5 `required` attribute error messages and prevent form submission. If you would like to turn this off, you can set Form's `noHtml5Validate` prop to `true`, which will set `noValidate` on the `form` element. + ### Custom validation Form data is always validated against the JSON schema. diff --git a/src/components/Form.js b/src/components/Form.js index 89b83cd4fb..bd10420111 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -17,6 +17,7 @@ export default class Form extends Component { noValidate: false, liveValidate: false, safeRenderCompletion: false, + noHtml5Validate: false } constructor(props) { @@ -138,7 +139,8 @@ export default class Form extends Component { action, autocomplete, enctype, - acceptcharset + acceptcharset, + noHtml5Validate } = this.props; const {schema, uiSchema, formData, errorSchema, idSchema} = this.state; @@ -155,6 +157,7 @@ export default class Form extends Component { autoComplete={autocomplete} encType={enctype} acceptCharset={acceptcharset} + noValidate={noHtml5Validate} onSubmit={this.onSubmit}> {this.renderErrors()} <_SchemaField @@ -201,6 +204,7 @@ if (process.env.NODE_ENV !== "production") { enctype: PropTypes.string, acceptcharset: PropTypes.string, noValidate: PropTypes.bool, + noHtml5Validate: PropTypes.bool, liveValidate: PropTypes.bool, safeRenderCompletion: PropTypes.bool, formContext: PropTypes.object, diff --git a/test/Form_test.js b/test/Form_test.js index be0c0ce024..7b088e4188 100644 --- a/test/Form_test.js +++ b/test/Form_test.js @@ -1131,7 +1131,8 @@ describe("Form", () => { action: "/users/list", autocomplete: "off", enctype: "multipart/form-data", - acceptcharset: "ISO-8859-1" + acceptcharset: "ISO-8859-1", + noHtml5Validate: true }; let node; @@ -1175,5 +1176,9 @@ describe("Form", () => { it("should set attr acceptcharset of form", () => { expect(node.getAttribute("accept-charset")).eql(formProps.acceptcharset); }); + + it("should set attr novalidate of form", () => { + expect(node.getAttribute("novalidate")).not.to.be.null; + }); }); });