Form component - Backend validation

[menthol]

Good work on the form component.

I've tested it, but it's hard to use with a Laravel Precognition-type backend or normal backend validation.

I suggest two improvements:

• the validation should be called with a second parameter, the name of the field that triggered the validation (validate(state, trigger)), so that we can validate only the field that the user actually touched.
• Secondly, we should be able to give the list of error list directly in props. Some checks can only be made once the form has been submitted. It might be useful to be able to display errors afterwards.

[romhml]

Thanks! I'll look into adding support for back-end validation / handling errors after submission. Do you have a small example I can play with to test the integration with Laravel Precognition?

[menthol]

Maybe somthing like this very dirty example:

let errors = [];
let response = ref<Todo|null>(null);
async function validate(state, trigger) {
    if (! trigger) {
        try {
            errors = [];
            response.value = await $fetch(
                '/api/todo',
                {
                    method: 'POST',
                    body: state.value
                })
        } catch (e) {
            response.value = null;

            if (e.response.status === 422) {
                errors = e.response.data.errors.map((errors, path) => ({
                    path,
                    message: errors[0],
                }));
            }
        }
        
        return errors;
    }
    
    try {
        errors = errors
            .filter(error => error.path !== trigger);

       response = await $fetch(
            '/api/todo',
            {
                method: 'POST',
                body: {
                    [trigger]: state.value[trigger]
                },
                headers: {
                    'Precognition': 'true',
                    'Precognition-Validate-Only': trigger,
                }
            })
    } catch (e) {
        if (e.response.status === 422 && e.response.data?.errors?.[trigger]) {
            errors.push({
                path: trigger,
                message: e.response.data.errors[trigger][0],
            });
        }
    }
    
    return errors;
}

[romhml]

Can you try something like this?

<script setup lang="ts">
import { useForm } from "laravel-precognition-vue";

const formRef = ref();
const f = useForm("post", "/users", {
  name: "",
  email: "",
});

async function validateWithPrecognition() {
  f.touch();
  await f.validate();
  return v.errors().entries().map((error) => ({
    message: error[1],
    path: error[0],
  }));
}

defineExpose({
  validate: async () => {
    await form.value.validate();
  },
});
</script>

<template>
  <UForm
    ref="formRef"
    :model="form.data()"
    :validate="validateWithPrecognition"
  >
    <slot />
  </UForm>
</template>

I checked this: https://github.com/laravel/precognition/blob/main/packages/vue/src/index.ts#L108
It looks like you can trigger validation without directly calling your endpoint

[menthol]

No you can't,
The precognition is a backend part of Laravel partial validation mecanism.
The Laravel packages are used to be implemented directly in vue and use axios for handling requests.
So I always self implements the Vue/Js part of Precognition.

The example you provide use frontend validation and not the precognition one.

[menthol]

I think per field validation and backend validations are two subject that require individual request