# Example Address Validation

You can use `<Validate/>` components to validate nested fields in components that you wouldn't normally have access to.

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

export function MyApp() {
  return (
    <Form onChange={console.log} onSubmit={alert}>
      <KiamaAddress prop="address">
        <Validate log prop="streetAddress" required>
          Street address is required
        </Validate>
        <Validate prop="state" required>
          State is required
        </Validate>
        <Group prop="postcode">
          <Validate required>Postcode is required</Validate>
          <Validate invalid={(value) => !/^[0-9]{3,4}$/.test(value)}>
            Postcode must be 3 or 4 digits
          </Validate>
        </Group>
      </KiamaAddress>
      <Submit />
      <Log />
    </Form>
  )
}
// filename KiamaAddress.js
// Example Kiama component
export function KiamaAddress({ prop, children }) {
  const states = ["ACT", "NSW", "NT", "QLD", "SA", "TAS", "VIC", "WA"]
  return (
    <Group prop={prop}>
      <div>
        <Label prop="streetAddress" label="Street Address">
          <Input />
          <Validations />
        </Label>
        <Label prop="city" label="City">
          <Input />
          {/* Kiama framework requires there to always be a city specified */}
          <Validate required>City is required by Kiama</Validate>
          <Validations />
        </Label>
        <Label prop="state" label="State">
          <Select placeholder="Select a state" options={states} />
          <Validate invalid={(value) => value && value !== "NSW"}>
            NSW Only
          </Validate>
          <Validations />
        </Label>
        <Label prop="postcode" label="Postcode">
          <Input type="number" />
          <Validations />
        </Label>
      </div>
      {children}
    </Group>
  )
}
// filename index.js
import { MyApp } from "./App.js"

render(<MyApp />)
```
