Repository: mozilla-services/react-jsonschema-form
Pull request #448 (2017-01-23 17:09:48)

Add ability to turn off HTML5 validation
### Reasons for making this change

HTML5 validation is different across browsers and doesn't fit all needs, so it would be good to have the ability to turn it off.

Related to #350.

### Checklist

* [ ] **I'm updating documentation**
  - [ ] I've checked the rendering of the Markdown text I've added
  - [ ] If I'm adding a new section, I've updated the Table of Content
* [x] **I'm adding or updating code**
  - [x] I've added and/or updated tests
  - [x] I've updated docs if needed
* [x] **I'm adding a new feature**
  - [ ] I've updated the playground with an example use of the feature



Patch:
diff --git a/README.md b/README.md
index 29b13c593..dee1fb07c 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)
      - [Custom error messages](#custom-error-messages)
      - [Error List Display](#error-list-display)
@@ -1138,6 +1139,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 de24535aa..3b6eb2385 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,
     validate: PropTypes.func,
     transformErrors: PropTypes.func,


Test patch:
diff --git a/test/Form_test.js b/test/Form_test.js
index be0c0ce02..7b088e418 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;
+    });
   });
 });