<form id="contact" @v:form>
  <input name="email" @v:rules="required|email" />
  <div @v:feedback="email"></div>
  
  <input name="message" @v:rules="required|min_length:10" />
  <div @v:feedback="message"></div>
  
  <button @v:submit>Submit</button>
</form>

import { Trivule } from 'trivule';

Trivule.init();

const form = Trivule.form('#contact');

form.onSuccess((data) => {
  console.log('Form valid!', data.values);
  // { email: 'user@example.com', message: '...' }
});

form.onError((data) => {
  console.log('Validation errors:', data.errors);
  // [{ field: 'email', message: 'Email is required' }]
});

form.onSuccess((data) => {
  console.log(data.values);  // All validated values
});

form.onError((data) => {
  console.log(data.errors);     // Array of errors
  console.log(data.firstError); // First error for convenience
  console.log(data.values);     // Current input values
});

const form = Trivule.form('#myForm', {
  invalidClass: 'is-invalid',
  validClass: 'is-valid',
  feedbackSelector: '[@v:feedback={name}]',
  triggerEvents: ['submit', 'blur']  // When to validate
});

// Check if form is currently valid
if (form.isValid()) {
  // Submit the form
}

// Get all input values
const values = form.inputs();  // [{ name: 'email', value: '...' }]

// Get failed inputs
const errors = form.failed();  // [{ name: 'email', value: '' }]

const trivule = Trivule.init();

trivule.defineRule('phone', (value) => ({
  passes: /^\+?[\d\s-]+$/.test(value),
  value
}), 'Please enter a valid phone number');

<input name="phone" @v:rules="required|phone" />

// Form initialized
form.on('tr.form.init', (e) => console.log('Initialized'));

// Form validated (success or failure)
form.onValidate((form) => console.log('Validated'));