Add novalidate

src/components.d.ts

@@ -420,6 +420,10 @@ export namespace Components {
           * Serializes all form controls elements and returns a `FormData` object.
          */
         "getFormData": () => Promise<FormData>;
+        /**
+          * Prevent the form from validating inputs before submitting.
+         */
+        "novalidate": boolean;
         /**
           * Submits the form. If all controls are valid, the `slSubmit` event will be emitted and the promise will resolve with `true`. If any form control is invalid, the promise will resolve with `false` and no event will be emitted.
          */
@@ -1838,6 +1842,10 @@ declare namespace LocalJSX {
         "skidding"?: number;
     }
     interface SlForm {
+        /**
+          * Prevent the form from validating inputs before submitting.
+         */
+        "novalidate"?: boolean;
         /**
           * Emitted when the form is submitted.
          */

src/components/form/form.tsx

@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter, Method, h } from '@stencil/core';
+import { Component, Event, EventEmitter, Method, Prop, h } from '@stencil/core';
 
 interface FormControl {
   tag: string;
@@ -25,6 +25,9 @@ export class Form {
   form: HTMLElement;
   formControls: FormControl[];
 
+  /** Prevent the form from validating inputs before submitting. */
+  @Prop() novalidate = false;
+
   /** Emitted when the form is submitted. */
   @Event() slSubmit: EventEmitter;
 
@@ -198,11 +201,13 @@ export class Form {
     const formControls = await this.getFormControls();
     const formControlsThatReport = formControls.filter((el: any) => typeof el.reportValidity === 'function') as any;
 
-    for (const el of formControlsThatReport) {
-      const isValid = await el.reportValidity();
+    if (!this.novalidate) {
+      for (const el of formControlsThatReport) {
+        const isValid = await el.reportValidity();
 
-      if (!isValid) {
-        return false;
+        if (!isValid) {
+          return false;
+        }
       }
     }