FormXpress jQuery Plugin Examples

A jQuery plugin for automatic form validation, file upload previews, progress bars, and customizable error messages with minimal configuration.

1. Basic Contact Form

Features: Auto-validation, humanized field names, required fields

2. Multi-File Upload Form

Features: Multi-file preview, individual remove buttons, progress bars, file validation

3. Registration Form with Custom Rules

Features: Password match validation, age range, URL validation

📖 Complete Configuration Options

{
    submitButton: null,              // Custom submit button selector
    errorClass: "input-error",       // CSS class for invalid inputs
    errorSpanClass: "error-text",    // CSS class for error messages
    showNameError: true,             // Show field name in error
    humanizeNames: true,             // Convert field_name to "Field Name"
    ajax: true,                      // Enable AJAX submission
    resetAfterSubmit: false,         // Auto-reset form after success
    maxFileSize: 10485760,           // Max file size in bytes (10MB)
    allowedFileTypes: [],            // ['image/*', 'application/pdf']

    // Custom validation rules
    customRules: {
        fieldName: function(value, input) {
            return null; // or error message
        }
    },

    // Hooks
    beforeValidate: function(form) {},
    afterValidate: function(form, isValid) {},
    beforeSubmit: function(form, formData) { return true; },
    onSuccess: function(response, form) {},
    onError: function(xhr, form) {},
    onProgress: function(percent, form) {},

    // Custom messages
    messages: {
        required: "This field is required",
        email: "Please enter a valid email",
        // ... all other messages
    }
}

🔧 Public Methods

// Get FormXpress instance
const fm = $('#myForm').data('FormXpress');

// Validate form
fm.validate();

// Reset form
fm.reset();

// Clear all errors
fm.clearErrors();