Sane textfield

example/src/pages/textfield/Textfield.svelte

@@ -1,5 +1,17 @@
 <DemoPanel>
 	<!-- NOTE: for 'outlined' Textfield parent element must set the background -->
+	<div style="flex: 1;margin: 0 8px;background: #eee;background: var(--bg-panel);">
+		<Textfield
+			required
+			autocomplete="off"
+			label="Secret word"
+			message="Please provide your Secret Word."
+			messagePersist
+			error="The secret word should start with SW !"
+			validator="{ startsWithSW }"
+		/>
+	</div>
+
 	<div style="flex: 1;margin: 0 8px;background: #eee;background: var(--bg-panel);">
 		<Textfield
 			bind:value
@@ -88,6 +100,10 @@
 	let readonly = false;
 	let disabled = false;
 
+	const startsWithSW = text => {
+		return text.startsWith('SW');
+	};
+
 	let type = 'default';
 
 	$: outlined = type === 'outlined';

example/src/pages/textfield/code.md

@@ -1,4 +1,15 @@
 ```xml
+<Textfield
+	required
+	autocomplete="off"
+	label="Secret word"
+	bind:value="{ secretWord }"
+	message="Please provide your Secret Word."
+	error="The secret word should start with SW !"
+	validator="{ startsWithSW }"
+/>
+
+
 <Textfield
 	autocomplete="off"
 	label="Label"
@@ -10,6 +21,12 @@
 <script>
 	import { Textfield } from 'svelte-mui';
 
+	const startsWithSW = text => {
+		return text.startsWith('SW');
+	}
+
+
 	let value = '';
+	let secretWord = '';
 </script>
-```
+```

example/src/pages/textfield/props.js

@@ -60,4 +60,10 @@ export default [
 		type: '[number, string]',
 		desc: 'Input value',
 	},
+	{
+		name: 'validator',
+		def: "null (*)",
+		type: 'Function',
+		desc: "A callback to check the value of the Textfield against. It takes a single argument, the value of the Textfield, and should return 'true' or 'false'.<br><br>When false is returned, the Textfield is marked as invalid and displays the '*' sign and the 'error' string if there is one. When no 'error' is provided the 'help' is displayed using the error color..<br><br> When 'required' is set and no validator is given, a default callback is attached that checks if the length of the trimmed string is bigger than 0.<br><br><br><i>Note:'required' must be set in order for the validator to be available</i>",
+	},
 ];

package.json

@@ -45,4 +45,4 @@
 		"index.mjs",
 		"index.js"
 	]
-}
+}

src/Textfield.svelte

@@ -3,6 +3,7 @@
 	class:filled
 	class:dirty
 	class:disabled
+	class:invalid
 	{style}
 	{title}
 >
@@ -11,7 +12,7 @@
 	<div class="focus-ring" />
 	<div class="label">
 		{label}
-		{#if required && !value.length}
+		{#if required}
 			<span class="required">*</span>
 		{/if}
 	</div>
@@ -21,9 +22,11 @@
 	{/if}
 
 	{#if !!message || !!error}
-		<div class="help" class:persist={messagePersist} class:error>
-			<div class="message">{error || message}</div>
-		</div>
+		{#if hasError}
+			<div class="help error">{error}{error ? '' : message}</div>
+		{:else}
+			<div class:persist={ !!messagePersist } class="help message">{message}</div>
+		{/if}
 	{/if}
 </div>
 
@@ -46,8 +49,10 @@
 		messagePersist,
 		message,
 		error,
+		validator,
+        invalid
 	};
-
+	let defaultValidator = v => (""+v).trim().length > 0;
 	let value = '';
 	let disabled = false;
 	let required = false;
@@ -60,6 +65,9 @@
 	let messagePersist = false;
 	let message = '';
 	let error = '';
+	let invalid = false;
+	let validator = required ? defaultValidator : null;
+	let hasError = false;
 
 	let placeholder;
 
@@ -82,12 +90,21 @@
 
 		!other.readonly && delete other.readonly;
 		!other.disabled && delete other.disabled;
+		other.required && validator == null && (validator = defaultValidator);
+		!other.required && validator == defaultValidator && (validator = null);
+		!other.required && delete other.required;
+
 		delete other.class;
 		other.type = allowedTypes.indexOf(other.type) < 0 ? 'text' : other.type;
 		placeholder = other.placeholder;
 		attrs = other;
 	}
 
+	$: {
+		invalid = validator ? !validator(value) : false;
+		hasError = required ? (invalid && value.length) : invalid;
+	}
+
 	$: dirty =
 		(typeof value === 'string' && value.length > 0) ||
 		typeof value === 'number' ||
@@ -135,6 +152,7 @@
 		left: 0.125em;
 		color: #ff5252;
 	}
+
 	.input {
 		box-sizing: border-box;
 		font: inherit;
@@ -170,6 +188,7 @@
 	.input:required {
 		box-shadow: none;
 	}
+	.invalid input,
 	.input:invalid {
 		box-shadow: none;
 	}
@@ -263,17 +282,22 @@
 		color: rgba(0, 0, 0, 0.3755);
 		/* postcss-custom-properties: ignore next */
 		color: var(--label, rgba(0, 0, 0, 0.3755));
-		opacity: 0;
+		opacity: 1;
 
 		overflow: hidden;
 		max-width: 90%;
 		white-space: nowrap;
 	}
-	.persist,
-	.error,
-	.input:focus ~ .help {
+
+	.help.message {
+		opacity: 0;
+	}
+
+	input:focus ~ .help.message,
+	.help.message.persist {
 		opacity: 1;
 	}
+
 	.error {
 		color: #ff5252;
 	}