Added possibility to use browser builtin submit (#226)

* Added possibility to use browser builtin submit * Make sure preventDefaultSubmit works as expected * Revert unrelated change * Update Formsy-spec.tsx * Update API.md * Update Formsy-spec.tsx Co-authored-by: Kamil Burzynski <Nopik@users.noreply.github.com> Co-authored-by: Robert Kuykendall <robert@rkuykendall.com>
formsy · Feb 15, 2020 · 761b3ef · 761b3ef
1 parent b8881d0
commit 761b3ef
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 2 deletions.
diff --git a/API.md b/API.md
@@ -9,6 +9,7 @@
   - [onSubmit()](#onSubmit)
   - [onValid()](#onValid)
   - [onValidSubmit()](#onValidsubmit)
+  - [preventDefaultSubmit](#preventDefaultSubmit)
   - [preventExternalInvalidation](#preventExternalInvalidation)
   - [reset()](#reset)
   - [updateInputsWithError()](#updateInputsWithError)
@@ -231,6 +232,22 @@ class MyForm extends React.Component {
 Manually set the form fields values by taking an object that maps field name to value as the first argument and
 optionally validate the inputs by passing `true` as the second argument.
 
+#### <a id="preventDefaultSubmit">preventDefaultSubmit</a>
+
+```jsx
+class MyForm extends React.Component {
+  render() {
+    return (
+      <Formsy preventDefaultSubmit>
+        ...
+      </Formsy>
+    );
+  }
+}
+```
+
+With the `preventDefaultSubmit` prop the form will issue full HTTP POST by browser means (and render resulting HTML).
+
 #### <a id="preventExternalInvalidation">preventExternalInvalidation</a>
 
 ```jsx

diff --git a/__tests__/Formsy-spec.tsx b/__tests__/Formsy-spec.tsx
@@ -457,6 +457,41 @@ describe('Update a form', () => {
     expect(input.instance().getErrorMessage()).toEqual(null);
   });
 
+  it('should prevent a default submit', () => {
+    class TestForm extends React.Component {
+      render() {
+        return (
+          <Formsy>
+            <TestInput name="foo" validations="isEmail" value="foo@bar.com" />
+          </Formsy>
+        );
+      }
+    }
+    const form = mount(<TestForm />);
+    const FoundForm = form.find(TestForm);
+    const submitEvent = {preventDefault: jest.fn()};
+    FoundForm.simulate('submit', submitEvent);
+    expect(submitEvent.preventDefault).toHaveBeenCalled();
+  });
+
+  it('should not prevent a default submit when preventDefaultSubmit is passed', () => {
+    class TestForm extends React.Component {
+      render() {
+        return (
+          <Formsy preventDefaultSubmit={false}>
+            <TestInput name="foo" validations="isEmail" value="foo@bar.com" />
+          </Formsy>
+        );
+      }
+    }
+    const form = mount(<TestForm />);
+    const FoundForm = form.find(TestForm);
+    const submitEvent = {preventDefault: jest.fn()};
+    FoundForm.simulate('submit', submitEvent);
+    expect(submitEvent.preventDefault).not.toHaveBeenCalled();
+  });
+
+
   it('should trigger an onValidSubmit when submitting a valid form', () => {
     const isCalled = jest.fn();
 

diff --git a/src/index.ts b/src/index.ts
@@ -43,6 +43,7 @@ export interface FormsyProps extends FormHTMLAttributesCleaned {
   onValid: () => void;
   onValidSubmit?: (model: IModel, resetModel: IResetModel, updateInputsWithError: IUpdateInputsWithError) => void;
   preventExternalInvalidation?: boolean;
+  preventDefaultSubmit?: boolean;
   resetValue: any;
   setValidations: any;
   setValue: any;
@@ -90,6 +91,7 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
     onValid: PropTypes.func,
     onValidSubmit: PropTypes.func,
     preventExternalInvalidation: PropTypes.bool,
+    preventDefaultSubmit: PropTypes.bool,
     resetValue: PropTypes.func,
     setValidations: PropTypes.func,
     setValue: PropTypes.func,
@@ -120,6 +122,7 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
     onValid: utils.noop,
     onValidSubmit: utils.noop,
     preventExternalInvalidation: false,
+    preventDefaultSubmit: true,
     resetValue: utils.noop,
     setValidations: utils.noop,
     setValue: utils.noop,
@@ -381,10 +384,10 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
 
   // Update model, submit to url prop and send the model
   public submit = (event?: any) => {
-    const { onSubmit, onValidSubmit, onInvalidSubmit } = this.props;
+    const { onSubmit, onValidSubmit, onInvalidSubmit, preventDefaultSubmit } = this.props;
     const { isValid } = this.state;
 
-    if (event && event.preventDefault) {
+    if (preventDefaultSubmit && event && event.preventDefault) {
       event.preventDefault();
     }
 
@@ -533,6 +536,7 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
       onValid,
       onValidSubmit,
       preventExternalInvalidation,
+      preventDefaultSubmit,
       resetValue,
       setValidations,
       setValue,