feat(): #113 add submitFormAutomatically setting

index.html

@@ -1003,6 +1003,40 @@ <h2>
           </form>
         </section>
       </div>
+
+      <div class="mt-5 section-shadow" id="submit-automatically">
+        <h2>
+          <a href="#submit-automatically" class="example-link"
+            >Submit form automatically</a
+          >
+        </h2>
+        <section class="base-example container py-2 px-0">
+          <form
+            action="#"
+            id="submit-automatically-form"
+            autocomplete="off"
+          >
+            <div class="row">
+              <div class="col">
+                <label for="example14_email">Enter your email</label>
+                <input
+                  type="email"
+                  class="form__input form-control"
+                  placeholder="Enter your email"
+                  autocomplete="off"
+                  name="example14_email"
+                  id="example14_email"
+                />
+              </div>
+            </div>
+            <div class="d-grid mt-4">
+              <button class="btn btn-primary" id="example14_submit-btn">
+                Submit
+              </button>
+            </div>
+          </form>
+        </section>
+      </div>
     </main>
     <script type="module" src="./src/demo.ts"></script>
   </body>

site/docs/instance/submitFormAutomatically.mdx

@@ -0,0 +1,23 @@
+---
+sidebar_position: 14
+---
+
+# submitFormAutomatically
+
+If true, the form will be submitted if the validation is successful.
+
+### Type
+
+`boolean`
+
+### Value by default
+
+`false`
+
+### Example
+
+```js
+{
+  submitFormAutomatically: true,
+}
+```

site/docs/intro.mdx

@@ -186,6 +186,13 @@ validator
 
 And that's it! Now our form is validated!
 
+:::info
+
+Please note that your form won't be submitted automatically (in case you want to define your own logic for sending the data to your backend using `onSuccess` callback).
+If you want to submit the form automatically please use [submitFormAutomatically](/docs/instance/submitFormAutomatically) setting.
+
+:::
+
 ### Demo
 
 <BasicExample />

site/docs/methods/onSuccess.mdx

@@ -11,3 +11,15 @@ Callback if validation passed.
 ```
 
 where `event` is a form submit event.
+
+:::info
+
+Please note that this callback does not submit your form. You should trigger it manually, or use [submitFormAutomatically](/docs/instance/submitFormAutomatically) setting.
+
+:::
+
+```js
+.onSuccess(( event ) => {
+    event.currentTarget.submit();
+});
+```

site/src/components/Demos/SubmitAutomaticallyExample.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Form from '../Form/Form';
+import JustValidate, { Rules } from 'just-validate';
+import Input from '@site/src/components/UI/Input';
+
+const BeforeSubmitExample = () => {
+  return (
+    <Form
+      id="submit-automatically_form"
+      init={(onSuccess) => {
+        const validator = new JustValidate('#submit-automatically_form', {
+          submitFormAutomatically: true,
+        });
+
+        validator.addField('#submit-automatically_email', [
+          {
+            rule: 'required' as Rules,
+          },
+          {
+            rule: 'email' as Rules,
+          },
+        ]);
+      }}
+    >
+      <Input
+        id="submit-automatically_email"
+        label="Email"
+        placeholder="Start typing..."
+      />
+    </Form>
+  );
+};
+
+export default BeforeSubmitExample;

site/src/pages/examples/index.mdx

@@ -1,7 +1,9 @@
----
+## import SubmitAutomaticallyExample from "../../components/Demos/SubmitAutomaticallyExample";
+
 title: Examples
 toc_min_heading_level: 2
 toc_max_heading_level: 5
+
 ---
 
 import Tabs from '@theme/Tabs';
@@ -1552,3 +1554,58 @@ validator.addField('#before-submit_email', [
 </TabItem>
 </Tabs>
 </details>
+
+## Submit form automatically
+
+<SubmitAutomaticallyExample />
+
+<br />
+<details>
+    <summary>Check out the code</summary>
+
+<Tabs>
+<TabItem value="HTML">
+
+```html
+<form id="submit-automatically_form" autocomplete="off" novalidate="novalidate">
+  <div class="control-wrapper">
+    <label class="input-label" for="submit-automatically_form_email"
+      >Email</label
+    >
+    <div class="input-wrapper">
+      <input
+        id="submit-automatically_form_email"
+        class="input"
+        autocomplete="off"
+        type="text"
+        placeholder="Start typing..."
+      />
+    </div>
+  </div>
+  <div class="control-wrapper">
+    <button type="submit" class="button">Submit</button>
+  </div>
+</form>
+```
+</TabItem>
+
+<TabItem value="JS">
+
+```js
+const validator = new JustValidate('#submit-automatically_form_form', {
+  submitFormAutomatically: true,
+});
+
+validator.addField('#submit-automatically_form_email', [
+  {
+    rule: 'required',
+  },
+  {
+    rule: 'email',
+  },
+]);
+```
+</TabItem>
+</Tabs>
+
+</details>

src/demo.ts

@@ -740,6 +740,33 @@ const validateBeforeSubmitting = (): void => {
     });
 };
 
+const submitAutomatically = (): void => {
+  const validation = new JustValidate('#submit-automatically-form', {
+    errorFieldCssClass: 'is-invalid  custom-class',
+    errorLabelStyle: {
+      fontSize: '14px',
+      color: '#dc3545',
+    },
+    focusInvalidField: true,
+    lockForm: true,
+    submitFormAutomatically: true,
+  });
+
+  validation
+    .addField('#example14_email', [
+      {
+        rule: 'required' as Rules,
+      },
+      {
+        rule: 'email' as Rules,
+      },
+    ])
+    .onSuccess((ev) => {
+      ev?.preventDefault();
+      window.showNotification();
+    });
+};
+
 basic();
 advanced();
 async();
@@ -753,3 +780,4 @@ successLabel();
 errorsContainer();
 showMessages();
 validateBeforeSubmitting();
+submitAutomatically();

src/main.ts

@@ -64,6 +64,7 @@ const defaultGlobalConfig: GlobalConfigInterface = {
   lockForm: true,
   testingMode: false,
   validateBeforeSubmitting: false,
+  submitFormAutomatically: false,
 };
 
 class JustValidate {
@@ -986,6 +987,10 @@ class JustValidate {
 
       if (this.isValid) {
         this.onSuccessCallback?.(ev);
+
+        if (this.globalConfig.submitFormAutomatically) {
+          (ev?.currentTarget as HTMLFormElement)?.submit();
+        }
       } else {
         this.onFailCallback?.(this.getCompatibleFields(), this.groupFields);
       }

src/modules/interfaces.ts

@@ -15,6 +15,7 @@ export interface GlobalConfigInterface {
   tooltip?: TooltipConfigInterface;
   errorsContainer?: string | Element | null;
   validateBeforeSubmitting: boolean;
+  submitFormAutomatically: boolean;
 }
 
 export enum Rules {