Skip to content

Commit

Permalink
Added test for onChange target
Browse files Browse the repository at this point in the history
  • Loading branch information
ciscoheat committed Feb 21, 2024
1 parent 8212ebd commit 1d22ed6
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 1 deletion.
3 changes: 2 additions & 1 deletion src/routes/(v2)/v2/Navigation.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@
'validators-clear',
'submit-prog',
'modify-reset',
'index-errors'
'index-errors',
'onchange-target'
].sort();
</script>

Expand Down
23 changes: 23 additions & 0 deletions src/routes/(v2)/v2/onchange-target/+page.server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { zod } from '$lib/adapters/zod.js';
import { message, superValidate } from '$lib/server/index.js';
import { schema } from './schema.js';
import { fail } from '@sveltejs/kit';

export const load = async () => {
const form = await superValidate(zod(schema));
return { form };
};

export const actions = {
default: async ({ request }) => {
const formData = await request.formData();
console.log(formData);

const form = await superValidate(formData, zod(schema));
console.log('POST', form);

if (!form.valid) return fail(400, { form });

return message(form, 'Posted OK!');
}
};
46 changes: 46 additions & 0 deletions src/routes/(v2)/v2/onchange-target/+page.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<script lang="ts">
import { superForm } from '$lib/client/index.js';
export let data;
let changes = 0;
const { form, errors, enhance } = superForm(data.form, {
taintedMessage: null,
onChange(event) {
if (event.target) {
changes = changes + 1;
}
}
});
</script>

<div id="name">NAME:{$form.name}</div>

<div id="changes">CHANGES:{changes}</div>

<form method="POST" use:enhance>
Name: <div class="edit" contenteditable="true" bind:textContent={$form.name}></div>
{#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
</form>

<style lang="scss">
.edit {
display: inline-block;
min-width: 50%;
background-color: #ddd;
margin: 0.5rem;
}
form {
margin: 2rem 0;
input {
background-color: #dedede;
}
.invalid {
color: crimson;
}
}
</style>
5 changes: 5 additions & 0 deletions src/routes/(v2)/v2/onchange-target/schema.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { z } from 'zod';

export const schema = z.object({
name: z.string().min(1)
});

0 comments on commit 1d22ed6

Please sign in to comment.