
# Validation Summary

ValidationSummary shows a list of errors that occured on the last submission attempt. These errors can be clicked to focus on the inputs that have validation errors.

ValidationSummary will also pass a context area to your validation element, eg `props.context.area` will equal `"summary"`

```jsx live noInline
// filename App.js
import { EmailValidator } from "./EmailValidation"

export const MyApp = () => {
  return (
    <Form onSubmit={alert}>
      <ValidationSummary />
      <h3>My example form</h3>
      <p>My form description</p>
      <Label prop="name" label="Name">
        <Input placeholder="John Snow">
          <Validate required>Required</Validate>
        </Input>
        <Validations />
      </Label>
      <Label prop="email" label="Email">
        <Input type="email" placeholder="john@snow.com">
          <EmailValidator />
        </Input>
        <Validations />
      </Label>
      <Submit />
      <Log />
    </Form>
  )
}
// filename EmailValidation.js
const emailIsInvalidTest = (email) =>
  !email || !/^[^@]+@[^@]+\.[^@]+$/.test(email)

const invalidEmailMessage = ({ context, ...props }) => {
  const isRenderedInSummary = context.area === "summary"

  const styles = !isRenderedInSummary
    ? {
        padding: "20px",
        borderLeft: "solid 8px var(--colors-error)",
      }
    : undefined

  return (
    <div className="validation" {...props} style={styles}>
      {isRenderedInSummary ? "Please check your email" : "Email is invalid"}
    </div>
  )
}

export function EmailValidator() {
  return (
    <>
      <Validate invalid={(email) => !email?.includes("@")}>
        Email must include @
      </Validate>
      <Validate invalid={(email) => !email?.split("@")[1]?.length >= 1}>
        Enter a part after the @
      </Validate>
      <Validate invalid={emailIsInvalidTest}>{invalidEmailMessage}</Validate>
    </>
  )
}
// filename index.js
import { MyApp } from "./App"

render(<MyApp />)
```
