novalidate custom fields in page create dialog

panel/src/components/Forms/Field.vue

@@ -58,10 +58,18 @@
 </template>
 
 <script>
-import { disabled, help, id, label, name, required } from "@/mixins/props.js";
+import {
+	disabled,
+	help,
+	id,
+	label,
+	name,
+	novalidate,
+	required
+} from "@/mixins/props.js";
 
 export const props = {
-	mixins: [disabled, help, id, label, name, required],
+	mixins: [disabled, help, id, label, name, novalidate, required],
 	props: {
 		buttons: Array,
 		counter: [Boolean, Object],

panel/src/components/Forms/Field/BlocksField.vue

@@ -28,7 +28,7 @@
 		</template>
 
 		<k-input-validator
-			v-bind="{ min, max, required }"
+			v-bind="{ min, max, novalidate, required }"
 			:value="JSON.stringify(value)"
 		>
 			<k-blocks

panel/src/components/Forms/Field/DateField.vue

@@ -27,6 +27,7 @@
 							:value="iso.date"
 							:min="min"
 							:max="max"
+							:novalidate="novalidate"
 							@input="onDateInput"
 						/>
 					</k-dropdown-content>
@@ -39,6 +40,7 @@
 				ref="timeInput"
 				:disabled="disabled"
 				:display="time.display"
+				:novalidate="novalidate"
 				:required="required"
 				:step="time.step"
 				:value="iso.time"
@@ -58,6 +60,7 @@
 					<k-dropdown-content ref="times" align-x="end">
 						<k-timeoptions-input
 							:display="time.display"
+							:novalidate="novalidate"
 							:value="value"
 							@input="onTimesInput"
 						/>

panel/src/components/Forms/Field/EntriesField.vue

@@ -30,7 +30,7 @@
 		</template>
 
 		<k-input-validator
-			v-bind="{ min, max, required }"
+			v-bind="{ min, max, novalidate, required }"
 			:value="JSON.stringify(entries)"
 		>
 			<!-- Empty State -->

panel/src/components/Forms/Field/LayoutField.vue

@@ -26,7 +26,7 @@
 		</template>
 
 		<k-input-validator
-			v-bind="{ min, max, required }"
+			v-bind="{ min, max, novalidate, required }"
 			:value="JSON.stringify(value)"
 		>
 			<k-layouts

panel/src/components/Forms/Field/LinkField.vue

@@ -49,6 +49,7 @@
 					:id="id"
 					ref="input"
 					:disabled="disabled"
+					:novalidate="novalidate"
 					:pattern="currentType.pattern ?? null"
 					:placeholder="currentType.placeholder"
 					:required="required"

panel/src/components/Forms/Field/ModelsField.vue

@@ -17,7 +17,7 @@
 
 		<k-dropzone :disabled="!hasDropzone" @drop="drop">
 			<k-input-validator
-				v-bind="{ min, max, required }"
+				v-bind="{ min, max, novalidate, required }"
 				:value="JSON.stringify(value)"
 			>
 				<k-collection

panel/src/components/Forms/Field/ObjectField.vue

@@ -57,6 +57,7 @@
 		<input
 			type="checkbox"
 			:checked="!isEmpty"
+			:formnovalidate="novalidate"
 			:required="required"
 			class="input-hidden"
 		/>

panel/src/components/Forms/Field/StructureField.vue

@@ -45,7 +45,7 @@
 		</template>
 
 		<k-input-validator
-			v-bind="{ min, max, required }"
+			v-bind="{ min, max, novalidate, required }"
 			:value="JSON.stringify(items)"
 		>
 			<template v-if="hasFields">

panel/src/components/Forms/Input.vue

@@ -40,10 +40,10 @@
 </template>
 
 <script>
-import { after, before, disabled } from "@/mixins/props.js";
+import { after, before, disabled, novalidate } from "@/mixins/props.js";
 
 export const props = {
-	mixins: [after, before, disabled],
+	mixins: [after, before, disabled, novalidate],
 	inheritAttrs: false,
 	props: {
 		autofocus: Boolean,

panel/src/components/Forms/Input/CalendarInput.vue

@@ -78,6 +78,7 @@
 		<input
 			:id="id"
 			:disabled="disabled"
+			:formnovalidate="novalidate"
 			:min="min"
 			:max="max"
 			:name="name"

panel/src/components/Forms/Input/CheckboxesInput.vue

@@ -71,6 +71,7 @@ export default {
 					info: option.info,
 					label: option.text,
 					name: this.name ?? this.id,
+					novalidate: this.novalidate,
 					type: "checkbox",
 					value: option.value
 				};

panel/src/components/Forms/Input/ChoiceInput.vue

@@ -16,6 +16,7 @@
 				value
 			}"
 			:class="[variant === 'invisible' ? 'sr-only' : null, $attrs.class]"
+			:formnovalidate="novalidate"
 			:data-variant="variant"
 			@input="$emit('input', $event.target.checked)"
 		/>

panel/src/components/Forms/Input/ColoroptionsInput.vue

@@ -12,6 +12,7 @@
 						:autofocus="autofocus && index === 0"
 						:checked="choice.value === value"
 						:disabled="disabled"
+						:formnovalidate="novalidate"
 						:name="name ?? id"
 						:required="required"
 						:value="choice.value"

panel/src/components/Forms/Input/ColorpickerInput.vue

@@ -43,6 +43,7 @@
 			@input="$emit('input', $event)"
 		/>
 		<input
+			:formnovalidate="novalidate"
 			:name="name"
 			:required="required"
 			:value="formatted"
@@ -202,7 +203,8 @@ export default {
 .k-colorpicker-input .k-coords-input {
 	border-radius: var(--rounded-sm);
 	aspect-ratio: 1/1;
-	background: linear-gradient(to bottom, transparent, #000),
+	background:
+		linear-gradient(to bottom, transparent, #000),
 		linear-gradient(to right, #fff, hsl(var(--h), 100%, 50%));
 }
 .k-colorpicker-input .k-alpha-input {

panel/src/components/Forms/Input/CoordsInput.vue

@@ -22,6 +22,7 @@
 			@keydown.delete="onDelete"
 		/>
 		<input
+			:formnovalidate="novalidate"
 			:name="name"
 			:required="required"
 			:value="value ? [value.x, value.y] : null"

panel/src/components/Forms/Input/DateInput.vue

@@ -5,6 +5,7 @@
 		:autofocus="autofocus"
 		:class="['k-string-input', `k-${type}-input`, $attrs.class]"
 		:disabled="disabled"
+		:formnovalidate="novalidate"
 		:placeholder="display"
 		:required="required"
 		:style="$attrs.style"

panel/src/components/Forms/Input/MultiselectInput.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="['k-multiselect-input', $attrs.class]" :style="$attrs.style">
 		<k-input-validator
-			v-bind="{ min, max, required }"
+			v-bind="{ min, max, novalidate, required }"
 			:value="JSON.stringify(value)"
 			anchor=".k-multiselect-input-toggle"
 		>

panel/src/components/Forms/Input/NumberInput.vue

@@ -14,6 +14,7 @@
 			value: number
 		}"
 		:class="['k-number-input', $attrs.class]"
+		:formnovalidate="novalidate"
 		:style="$attrs.style"
 		type="number"
 		@blur="onBlur"

panel/src/components/Forms/Input/PicklistInput.vue

@@ -32,7 +32,7 @@
 		<template v-if="filteredOptions.length">
 			<div class="k-picklist-input-body">
 				<k-input-validator
-					v-bind="{ min, max, required }"
+					v-bind="{ min, max, novalidate, required }"
 					:value="JSON.stringify(value)"
 				>
 					<component

panel/src/components/Forms/Input/RadioInput.vue

@@ -57,6 +57,7 @@ export default {
 					info: option.info,
 					label: option.text,
 					name: this.name ?? this.id,
+					novalidate: this.novalidate,
 					type: "radio",
 					value: option.value
 				};

panel/src/components/Forms/Input/RangeInput.vue

@@ -16,6 +16,7 @@
 				required,
 				step
 			}"
+			:formnovalidate="novalidate"
 			:value="position"
 			type="range"
 			@input="$emit('input', $event.target.valueAsNumber)"

panel/src/components/Forms/Input/SelectInput.vue

@@ -11,6 +11,7 @@
 			:autofocus="autofocus"
 			:aria-label="ariaLabel"
 			:disabled="disabled"
+			:formnovalidate="novalidate"
 			:name="name"
 			:required="required"
 			:value="value"

panel/src/components/Forms/Input/StringInput.vue

@@ -18,6 +18,7 @@
 		}"
 		:aria-label="ariaLabel"
 		:class="['k-string-input', $attrs.class]"
+		:formnovalidate="novalidate"
 		:data-font="font"
 		:style="$attrs.style"
 		@input="$emit('input', $event.target.value)"

panel/src/components/Forms/Input/TagsInput.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :data-can-add="canAdd" class="k-tags-input">
 		<k-input-validator
-			v-bind="{ min, max, required }"
+			v-bind="{ min, max, novalidate, required }"
 			:value="JSON.stringify(value)"
 		>
 			<k-tags

panel/src/components/Forms/Input/TextareaInput.vue

@@ -29,6 +29,7 @@
 					value
 				}"
 				v-direction
+				:formnovalidate="novalidate"
 				:data-font="font"
 				class="k-textarea-input-native"
 				@click="$refs.toolbar?.close()"

panel/src/components/Forms/Input/TimeoptionsInput.vue

@@ -42,6 +42,7 @@
 		<input
 			:id="id"
 			:disabled="disabled"
+			:formnovalidate="novalidate"
 			:min="min"
 			:max="max"
 			:name="name"

panel/src/components/Forms/Input/TogglesInput.vue

@@ -6,7 +6,10 @@
 	>
 		<legend class="sr-only">{{ $t("options") }}</legend>
 
-		<k-input-validator :required="required" :value="JSON.stringify(value)">
+		<k-input-validator
+			v-bind="{ novalidate, required }"
+			:value="JSON.stringify(value)"
+		>
 			<ul
 				:data-labels="labels"
 				:style="{ '--options': columns ?? options.length }"

panel/src/components/Forms/Input/Validator.js

@@ -6,7 +6,7 @@ export default class InputValidator extends HTMLElement {
 	static formAssociated = true;
 
 	static get observedAttributes() {
-		return ["min", "max", "required", "value"];
+		return ["min", "max", "novalidate", "required", "value"];
 	}
 
 	attributeChangedCallback(attribute, oldValue, newValue) {
@@ -20,6 +20,7 @@ export default class InputValidator extends HTMLElement {
 
 		this.max = null;
 		this.min = null;
+		this.novalidate = false;
 		this.required = false;
 	}
 

panel/src/components/Forms/Input/WriterInput.vue

@@ -18,6 +18,7 @@
 
 		<textarea
 			ref="output"
+			:formnovalidate="novalidate"
 			:name="name"
 			:required="required"
 			:value="value"

panel/src/mixins/props.js

@@ -12,6 +12,7 @@ import layout from "./props/layout.js";
 import maxlength from "./props/maxlength.js";
 import minlength from "./props/minlength.js";
 import name from "./props/name.js";
+import novalidate from "./props/novalidate.js";
 import options from "./props/options.js";
 import pattern from "./props/pattern.js";
 import placeholder from "./props/placeholder.js";
@@ -34,6 +35,7 @@ export {
 	maxlength,
 	minlength,
 	name,
+	novalidate,
 	options,
 	pattern,
 	placeholder,

panel/src/mixins/props/novalidate.js

@@ -0,0 +1,8 @@
+export default {
+	props: {
+		/**
+		 * If `true`, the native browser validation will not be triggered
+		 */
+		novalidate: Boolean
+	}
+};

src/Form/Field.php

@@ -136,6 +136,12 @@ public static function defaults(): array
 				'label' => function ($label = null) {
 					return I18n::translate($label, $label);
 				},
+				/**
+				 * If `true`, the native browser validation will not be triggered for this field
+				 */
+				'novalidate' => function (bool $novalidate = false): bool {
+					return $novalidate;
+				},
 				/**
 				 * Optional placeholder value that will be shown when the field is empty
 				 */

src/Form/FieldClass.php

@@ -38,6 +38,7 @@ abstract class FieldClass
 
 	protected bool $disabled;
 	protected string|null $name;
+	protected bool $novalidate;
 	protected Fields $siblings;
 
 	public function __construct(
@@ -53,6 +54,7 @@ public function __construct(
 		$this->setLabel($params['label'] ?? null);
 		$this->setModel($params['model'] ?? null);
 		$this->setName($params['name'] ?? null);
+		$this->setNovalidate($params['novalidate'] ?? false);
 		$this->setPlaceholder($params['placeholder'] ?? null);
 		$this->setRequired($params['required'] ?? false);
 		$this->setSiblings($params['siblings'] ?? null);
@@ -171,6 +173,11 @@ protected function setName(string|null $name = null): void
 		$this->name = strtolower($name ?? $this->type());
 	}
 
+	protected function setNovalidate(bool $novalidate = false): void
+	{
+		$this->novalidate = $novalidate;
+	}
+
 	protected function setSiblings(Fields|null $siblings = null): void
 	{
 		$this->siblings = $siblings ?? new Fields([$this]);

src/Panel/PageCreateDialog.php

@@ -180,6 +180,9 @@ public function customFields(): array
 			// switch all fields to 1/1
 			$field['width'] = '1/1';
 
+			// switch off validation
+			$field['novalidate'] = ($this->blueprint()->create()['status'] ?? 'draft') !== 'draft';
+
 			// add the field to the form
 			$custom[$name] = $field;
 		}