# SmartPasteButton Validation

The SmartPasteButton component focuses solely on extracting data from clipboard content and populating form fields. It does not perform any validation—that responsibility belongs to the Form component.

Your [`click`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpasteclickevent) handler is responsible for the AI request, so handle its failures there. Catch rejected `fetch` promises, and check `response.ok`, because HTTP errors still resolve.

## Form Validation

To evaluate the populated values, configure the Form's [`validator`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formprops#validator) prop. The SmartPasteButton does not run Form validation itself.

The following example runs the validator on every field after SmartPasteButton populates the form. Required fields that the AI service did not fill display an error message. Populated fields are highlighted, and editing a field clears its error. To see the error state, click Smart Paste with an empty clipboard.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/smartpaste/error-handling/source.txt)

## AI Guidance for Extracted Values

Provide constraints in your field configuration to guide the AI service toward values that meet your criteria. These instructions can reduce invalid results, but they do not validate or guarantee the response.

The following example demonstrates AI guidance with contextual descriptions and constrained lists. The demo shows the service mapping "High" to a numeric priority (4-5) and "Done" to the status "Completed".

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/smartpaste/ai-guidance/source.txt)

### Contextual Descriptions

Use the [`description`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpasteformfield#description) property of the [`formFields`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpastebuttonprops#formFields) prop to provide context, such as numeric ranges or format requirements. The AI service can use this information to interpret clipboard content.

```ts
const formFields: SmartPasteFormField[] = [
    {
        field: 'priority',
        type: 'kendo-input',
        description: 'Task priority on scale 1-5. Map terms: Low=1-2, Medium=3, High=4-5, Critical=5.'
    },
    {
        field: 'deliveryDate',
        type: 'kendo-input',
        description: 'Preferred delivery date. Must be a future date.'
    }
];
```

### Constrained Lists

For fields with a fixed set of options, provide the [`allowedValues`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpasteformfield#allowedvalues) array. This gives the AI service the permitted values to consider, but it does not guarantee that the response contains one of them.

Validate returned values with your form rules or inspect them in the `click` handler before you pass them to `setResponse`.

```ts
const formFields: SmartPasteFormField[] = [
    {
        field: 'status',
        type: 'kendo-input',
        description: 'Current project status. Map unambiguous terms like "Done" to "Completed".',
        allowedValues: ['Not Started', 'In Progress', 'Completed', 'On Hold']
    }
];
```

## Manual Validation

When the AI service processes clipboard content, it may not successfully extract values for all form fields. Manual validation allows you to inspect the AI response, identify missing or incomplete data, and display meaningful error messages to the user through the Form's [`errors`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formprops#errors) prop.

Additionally, you can modify or transform the data before passing it to [`setResponse`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpasteclickevent#setResponse). This enables you to normalize values, apply default fallbacks, or format data to match your form's expected structure. Keep request failures separate from field validation errors, and render the request error in an accessible alert.

The following example demonstrates validating the AI response and displaying custom error messages for fields that could not be extracted from the clipboard content.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/smartpaste/manual-validation/source.txt)

After receiving the AI response, validate and optionally transform the data before populating the form:

```vue
<script setup lang="ts">
import { ref } from 'vue';
import type { SmartPasteClickEvent } from '@progress/kendo-vue-buttons';

const formErrors = ref<{ [name: string]: string }>({});

const handleSmartPaste = async (e: SmartPasteClickEvent) => {
    const response = await fetch('/api/smartpaste', { ... });
    const data = await response.json();

    // Transform or normalize the data before populating the form
    const transformedData = {
        ...data,
        email: data.email?.toLowerCase(),
        phone: data.phone?.replace(/\D/g, '') // Remove non-digits
    };

    e.setResponse(transformedData);

    // Set error messages for fields the AI couldn't extract
    const errors: { [name: string]: string } = {};
    if (!data.fullName) errors.fullName = 'Could not extract name from clipboard';

    formErrors.value = errors;
};
</script>

<template>
    <Form :errors="formErrors" @submit="handleSubmit">
        
    </Form>
</template>
```

## Content Pre-Validation

Content pre-validation checks the clipboard content before making an API request. This approach prevents unnecessary API calls when the clipboard is empty, contains insufficient data, or fails to meet specific criteria.

Pre-validation improves user experience by providing immediate feedback and reduces server load by filtering out invalid requests at the client level.

The following example validates that the clipboard contains sufficient content before calling the AI service. Use the "Clear Clipboard" button to test the empty clipboard scenario.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/smartpaste/content-validation/source.txt)

Access the clipboard content through `e.requestData.content` and validate before proceeding:

```vue
<script setup lang="ts">
import { ref } from 'vue';
import type { SmartPasteClickEvent } from '@progress/kendo-vue-buttons';

const clipboardError = ref(false);

const handleSmartPaste = async (e: SmartPasteClickEvent) => {
    const clipboardContent = e.requestData?.content;

    if (!clipboardContent || clipboardContent.trim() === '') {
        clipboardError.value = true;
        setTimeout(() => { clipboardError.value = false; }, 3000); // Reset after 3 seconds
        return; // Exit early, no API call made
    }

    // Validation passed, proceed with API call
    const response = await fetch('/api/smartpaste', { ... });
};
</script>

<template>
    <SmartPasteButton @click="handleSmartPaste" :theme-color="clipboardError ? 'error' : 'primary'">
        {{ clipboardError ? 'Clipboard is empty' : 'Smart Paste' }}
    </SmartPasteButton>
</template>
```

## Suggested Links

* [SmartPasteButton Configuration](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/smartpaste/configuration)
* [SmartPasteButton Events](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/smartpaste/events)
* [SmartPasteButton API Reference](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/smartpastebuttonprops)
* [Kendo UI for Vue Form Validation](https://www.telerik.com/kendo-vue-ui-develop/components/form/validation)