PaForm

Form wrapper component that provides validation handling and submit management for PayAdvantage UI forms. Automatically validates all child form components before submission.

Interactive Example

Name

*

Email

*

Phone

*

Preferred Contact Method

Email

Phone

SMS

I agree to the terms and conditions

Form Status:Invalid

Try filling out the form above to see validation in action. The form will only submit when all required fields are valid.

Basic Usage

<template>
  <pa-form @submit="handleSubmit">
    <pa-input-group 
      label="Name" 
      v-model="form.name"
      required 
    />
    <pa-input-group 
      label="Email" 
      v-model="form.email"
      type="email"
      required 
    />
    <pa-button type="submit">Submit</pa-button>
  </pa-form>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({
  name: '',
  email: ''
})

const handleSubmit = (event) => {
  console.log('Form submitted:', form.value)
  // Form is only submitted if all validation passes
}
</script>

Importing

import { PaForm } from '@payadvantage/ui-components'

Properties

Property	Type	Default	Description
novalidate	boolean	false	Disables automatic form validation
validated	boolean	false	Shows validation state on all fields (for Bootstrap compatibility)

Events

Event	Payload	Description
submit	Event	Emitted when form is submitted and all validation passes
update:validity	ValidityChangedEvent	Emitted when form validation state changes

Methods

Method	Description
checkValidity()	Validates all form fields synchronously and returns boolean
checkValidityAsync()	Validates all form fields (including async validators) and returns Promise<boolean>
resetValidity()	Resets validation state of the form and all child components
submit()	Programmatically submits the form

Usage Notes

PaForm automatically prevents form submission if any child form components fail validation. It integrates with PayAdvantage validation system and supports both synchronous and asynchronous validation rules.

The component wraps a standard HTML <form> element and passes through all standard form attributes.

Related Components

• PaInputGroup - Input groups with validation support
• PaRadioGroup - Radio button groups with validation
• PaCheckbox - Checkboxes with validation support
• PaButton - Form submit buttons