Form Manager Documentation

Overview

FormManager is a comprehensive form management system that provides advanced features for handling forms, file uploads, validation, and AJAX submissions in Now.js applications.

Key Features

AJAX form submissions with file upload support
Built-in form validation
CSRF protection
File upload with size and type validation
Integration with ElementManager
Event handling and state management
Support for existing forms via data attributes
Error handling and notifications

Quick Start


<form id="demoForm" data-form data-ajax-submit="true">
  <div class="ggrid">
    <div class="block6">
      <label>Name</label>
      <input type="text" name="name" data-validate="required|minlength:3"
             data-element class="g-input" placeholder="Enter your name">
    </div>

    <div class="block6">
      <label>Email</label>
      <input type="email" name="email" data-validate="required|email"
             data-element class="g-input" placeholder="Enter your email">
    </div>

    <div class="block12">
      <label>Photo</label>
      <input type="file" name="photo" accept="image/*" data-element>
    </div>

    <div class="block12">
      <button type="submit" class="button blue">Submit</button>
      <button type="reset" class="button">Reset</button>
    </div>
  </div>
</form>


// Initialize FormManager
FormManager.init({
  ajaxSubmit: true,
  validateBeforeSubmit: true,
  resetAfterSubmit: true,
  maxUploadSize: 5 * 1024 * 1024 // 5MB
});

// Handle form events
EventManager.on('form:success', ({ formId, result }) => {
  NotificationManager.success('Form submitted successfully!');
});

EventManager.on('form:error', ({ error }) => {
  NotificationManager.error(error.message || 'Form submission failed');
});

Live Demo

Configuration Options


FormManager.init({
  // Basic settings
  debug: false,                 // Enable debug mode
  ajaxSubmit: true,            // Use AJAX for submissions
  validateBeforeSubmit: true,  // Validate before submit
  resetAfterSubmit: false,     // Reset form after successful submit

  // UI/UX settings
  focusOnError: true,          // Focus first error field
  scrollToError: true,         // Scroll to first error
  errorClass: 'has-error',     // Error class name
  successClass: 'has-success', // Success class name

  // Upload settings
  uploadTimeout: 30000,        // Upload timeout in ms
  maxUploadSize: 10485760,    // Max file size (10MB)
  allowedMimeTypes: [         // Allowed file types
    'image/*',
    'application/pdf',
    // ...
  ],

  // CSRF Protection
  csrf: {
    enabled: true,
    tokenName: '_token',
    headerName: 'X-CSRF-TOKEN',
    cookieName: 'XSRF-TOKEN'
  }
});

Validation Rules

FormManager supports both HTML5 validation attributes and custom validation rules via data attributes:


<!-- HTML5 Validation -->
<input type="email" required minlength="3" maxlength="50">

<!-- Custom Validation Rules -->
<input type="text" data-validate="required|minlength:3|pattern:[A-Za-z]+">

Available Validation Rules

required - Field must not be empty
email - Must be valid email address
url - Must be valid URL
date - Must be valid date
number - Must be numeric value
min:value - Minimum numeric value
max:value - Maximum numeric value
minlength:value - Minimum string length
maxlength:value - Maximum string length
pattern:regex - Match regular expression
equalTo:field - Must match another field

API Reference

Methods

init(options) - Initialize FormManager
getForm(formId) - Get form instance
getValues(formId) - Get form values as object
setValues(formId, values) - Set form values
isValid(formId) - Check if form is valid
isModified(formId) - Check if form is modified
reset(formId) - Reset form to initial state
destroy(formId) - Clean up form instance

Events

form:success - Form submitted successfully
form:error - Form submission failed
form:validate - Form validation complete
form:reset - Form reset complete