import { Meta, Canvas, Controls, Story, Source } from '@storybook/blocks';
import * as ValidationStories from './Validation.stories';

<Meta title="Form/Validation" />

# Validation <small class="bootstrap-docs">[Bootstrap Validation](https://getbootstrap.com/docs/5.3/forms/validation/)</small>

You can provide valuable, actionable feedback to users with `HTML5` form validation.

<Canvas withSource="none">
  <Story of={ValidationStories.Basic} />
</Canvas>

<Source
  dark
  language="html"
  code={` 
<script lang="ts">
  import { FormGroup, Input } from '@sveltestrap/sveltestrap';
  let validated = false;
</script>

<FormGroup>
  <Input value="Bad value" feedback="Invalid feedback" invalid />
</FormGroup>

<FormGroup>
  <Input value="Correct value" feedback="Valid feedback" valid />
</FormGroup>
`} />

## Dynamic Validation

<Canvas withSource="none">
  <Story of={ValidationStories.Dynanic} />
</Canvas>

<Source
  dark
  language="html"
  code={` 
<script lang="ts">
  import { Button, Form, FormGroup, Input } from '@sveltestrap/sveltestrap';
  let validated = false;
</script>

<Form {validated} on:submit={(e) => e.preventDefault()}>
  <FormGroup>
    <Input feedback="This requires a value" placeholder="This requires a value" required />
  </FormGroup>
  <FormGroup>
    <Input feedback="This requires an email" placeholder="This requires an email" required type="email" />
  </FormGroup>
  <Button type="submit" on:click={() => (validated = true)}>Fake Submit</Button>
</Form>
`}
/>