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 <[email protected]> Co-authored-by: Robert Kuykendall <[email protected]>
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="[email protected]" />
+ </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="[email protected]" />
+ </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,