Skip to content

Instantly share code, notes, and snippets.

@lmiller1990
Created January 20, 2024 01:44
Show Gist options
  • Save lmiller1990/cfb703d79589ebeda3802a74b071c078 to your computer and use it in GitHub Desktop.
Save lmiller1990/cfb703d79589ebeda3802a74b071c078 to your computer and use it in GitHub Desktop.
Vaildation
<template>
<input v-model="formData.name" />
<p v-if="!formStatus.name.valid">{{ formStatus.name.message }}</p>
</template>
<script setup lang="ts'>
const formData = reactive({
name
})
/** Assume all valid by default */
const formStatus = ref<{ name: { valid: boolean, message?: string }>({
name: { value: true }
})
watch(formData, async (newData) => {
const serverValidated = await fetch("/validate, { method: "POST", formData: newData })
formStatus.value = serverValidated /* could be { name: { valid: false, message: 'Too short' } } */
})
const formState = computed(() => {
return {
name: {
value: formData.name
}
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment