Building Forms with Validation in Attractions and Svelte

[MyrinNew]

Attractions is a modern and stylish UI kit for Svelte that provides beautiful, accessible components for building web applications. It offers a comprehensive set of form components with built-in styling and customization options. This article covers building complete forms with validation, error handling, and user feedback using Attractions form components in Svelte. This is part 10 of a series on using Attractions with Svelte.


This guide walks through creating a production-ready contact form with multiple input types, validation, error messages, and proper user experience using Attractions components.


Prerequisites

Before starting, ensure you have:

• A Svelte project (SvelteKit or standalone Svelte 3+)
• Node.js 14+ and npm/pnpm/yarn
• Basic understanding of Svelte reactivity and form handling
• Familiarity with JavaScript validation concepts

Installation

Install Attractions and its required dependencies using your preferred package manager:






npm install --save-dev attractions svelte-preprocess sass postcss autoprefixer
# or
pnpm add -D attractions svelte-preprocess sass postcss autoprefixer
# or
yarn add -D attractions svelte-preprocess sass postcss autoprefixer







The svelte-preprocess package is required for processing SCSS files, and sass is needed for compiling Attractions' styles.


Project Setup

1. Configure Svelte Preprocessor

Update your svelte.config.js to include the Attractions importer:






// svelte.config.js
import sveltePreprocess from 'svelte-preprocess';
import makeAttractionsImporter from 'attractions/importer.js';

const config = {
preprocess: sveltePreprocess({
scss: {
importer: makeAttractionsImporter(),
includePaths: ['src'],
},
postcss: true,
}),
// ... other config
};

export default config;







2. Import Attractions Styles

Create a global styles file or import in your main layout:















For standalone Svelte projects, import in your main entry file:






// main.js
import 'attractions/styles.css';
import App from './App.svelte';

const app = new App({
target: document.body
});







3. Optional: Customize Theme

Create a theme file to customize Attractions' default colors:






// src/_attractions-theme.scss
@use 'attractions/_variables' with (
$primary: #ff3e00,
$secondary: #1e90ff,
$error: #ff4444
);







Then update your svelte.config.js to use the theme:






// svelte.config.js
import sveltePreprocess from 'svelte-preprocess';
import makeAttractionsImporter from 'attractions/importer.js';

const config = {
preprocess: sveltePreprocess({
scss: {
importer: makeAttractionsImporter({
themeFile: 'src/_attractions-theme.scss',
}),
includePaths: ['src'],
},
postcss: true,
}),
};

export default config;







First Example / Basic Usage

Let's start with a simple form containing a text input with basic validation:









on:submit={handleSubmit} class="form-container">

label="Email Address"
type="email"
bind:value={email}
error={emailError}
on:blur={handleEmailBlur}
placeholder="Enter your email"
/>

type="submit" variant="filled">
Submit