PHPackages webcito/jquery-form - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Validation & Sanitization](/categories/validation) 4. / 5. webcito/jquery-form ActiveLibrary[Validation & Sanitization](/categories/validation) webcito/jquery-form =================== The easy way to handle forms with jQuery and Bootstrap v1.0.5(3mo ago)084proprietaryPHP >=7.4 Since Apr 19Pushed 3mo ago1 watchersCompare [ Source](https://github.com/ThomasDev-de/jquery-form)[ Packagist](https://packagist.org/packages/webcito/jquery-form)[ RSS](/packages/webcito-jquery-form/feed)WikiDiscussions main Synced today READMEChangelog (6)Dependencies (4)Versions (7)Used By (0) jQuery Form Plugin ================== [](#jquery-form-plugin) [![Version](https://camo.githubusercontent.com/acd0315cc88f23ca031d14030a82baad91de1452da8f25f59b71751705f4e023/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d312e302e352d626c75652e737667)](https://github.com/webcito/jquery-form)[![License](https://camo.githubusercontent.com/7e514ce290df032d8491292467da952c904093f4b08e58885b14238d563a2480/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d70726f70726965746172792d6f72616e67652e737667)](LICENSE)[![jQuery](https://camo.githubusercontent.com/6550b56273372afe5b92dce692319658433fd19bb259226c85ed84baf05918d3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6a71756572792d253345253344253230332e362d626c75652e737667)](https://jquery.com/)[![Bootstrap](https://camo.githubusercontent.com/ffe94adb78525a96aa167b37d492ae4dba58ec634c1f1b3842508302d786d8af/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f626f6f7473747261702d253345253344253230352e302d707572706c652e737667)](https://getbootstrap.com/) A powerful, lightweight jQuery plugin designed to streamline form handling with AJAX and Bootstrap 5. It automates validation display, file uploads, and provides a rich API for modern web applications. [changelog](CHANGELOG.md) 🚀 Key Features -------------- [](#-key-features) - **Seamless AJAX Integration**: Automatic form submission and state management. - **Bootstrap 5 Native**: Built-in support for Bootstrap validation states (`is-invalid`, `invalid-feedback`). - **Smart File Uploads**: Automatic detection of file inputs with native `FormData` support. - **Real-time Progress**: Built-in upload progress tracking for responsive UIs. - **Asynchronous Workflow**: Support for `async/await` in pre-submission hooks. - **Auto-Initialization**: Zero-config initialization via HTML5 data attributes. - **Enhanced UX**: Automatic "Required" field indicators and modal integration. - **Event-Driven Architecture**: Comprehensive event system for maximum extensibility. 📋 Requirements -------------- [](#-requirements) DependencyVersion**jQuery**>= 3.6**Bootstrap**>= 5.0--- 📦 Installation -------------- [](#-installation) ### Via Composer [](#via-composer) ``` composer require webcito/jquery-form ``` ### Manual Installation [](#manual-installation) Download the latest release and include the script in your project: ``` ``` --- ### Automatic initialization via Data Attributes [](#automatic-initialization-via-data-attributes) The plugin automatically initializes for forms with `data-bs-toggle="form"` or `data-toggle="form"`. Initialization occurs immediately on page load thanks to a MutationObserver, as well as for any forms added later (e.g., via AJAX). For batch operations, initialization is performed efficiently using debouncing. ``` Email address Submit ``` ### 2. JavaScript Initialization [](#2-javascript-initialization) For more control, initialize the plugin manually: ``` $('.my-form').form({ onSuccess: function (form, response) { alert('Form submitted successfully!'); } }); ``` --- ⚙️ Configuration ---------------- [](#️-configuration) Use `$.form.setDefaults()` to configure global behavior or pass options during initialization. OptionTypeDefaultDescription`autocomplete``boolean``false`Globally disables browser autocomplete/autocorrect.`resetOnModalHidden``boolean``true`Resets the form when its parent Bootstrap modal is closed.`setErrorsOnElements``boolean``true`Automatically places the errors in the input fields.`onBeforeSend``function``null`Hook before submission. Supports `async`. Return `false` to abort.`onSuccess``function``null`Triggered on successful AJAX response.`onError``function``null`Triggered when the server returns errors.`onProgress``function``null`Provides upload progress (0-100).`onComplete``function``null`Triggered after success or error.--- 📤 File Uploads & Progress Tracking -------------------------------------- [](#-file-uploads--progress-tracking) The plugin handles multi-part form data automatically. Implementing a progress bar is trivial: ``` $('#uploadForm').form({ onProgress: function (form, progress) { const percent = Math.round(progress) + '%'; $('.progress-bar').css('width', percent).text(percent); } }); ``` --- ⚡ Events API ------------ [](#-events-api) The plugin triggers namespaced events (`.bs.form`) for deep integration. Events can be listened to on the form element or via delegation. ### Form Events [](#form-events) EventParametersDescription`init.bs.form``event, $form`Triggered after initialization.`beforeSend.bs.form``event, $form, aborted`Before AJAX request. `aborted` is true if `onBeforeSend` returned false.`progress.bs.form``event, $form, progress`Upload progress (0-100).`success.bs.form``event, $form, response`On successful AJAX response.`error.bs.form``event, $form, errors, jqXHR`On AJAX error or validation failure.`complete.bs.form``event, $form, response`After request completion (success or error).`cleared.bs.form``event, $form`Triggered when validation states are removed.`resetting.bs.form``event, $form`Triggered on form reset.`any.bs.form``event, eventName`Special event triggered for every plugin action.### Field Events [](#field-events) EventParametersDescription`error.bs.form``event, $field, message`Triggered on a specific input field when it receives an error.``` $(document).on('success.bs.form', '#my-form', function (event, $form, response) { console.log('Server response:', response); }); $(document).on('error.bs.form', 'input', function (event, $field, message) { console.warn(`Validation failed for ${$field.attr('name')}: ${message}`); }); ``` --- 🛠 Public Methods ---------------- [](#-public-methods) Call methods using the syntax: `$(selector).form('methodName', parameters)`. MethodParametersDescription`setErrors``object`Manually display errors on specific fields. Keys must match field names.``` // Manually set errors $('#my-form').form('setErrors', { email: 'Invalid domain', password: 'Too weak' }); ``` --- ❌ Error Handling ---------------- [](#-error-handling) The plugin expects a JSON response for validation errors (HTTP 4xx or 5xx). ### Field-Level Errors [](#field-level-errors) Map the input `name` attribute to the error message: ``` { "email": "This email is already registered.", "username": "Username is too short." } ``` ### Global Errors [](#global-errors) Use the `default` key to display a global Bootstrap alert at the top of the form: ``` { "default": "A critical system error occurred. Please try again later." } ``` --- 🎨 Styling --------- [](#-styling) The plugin injects minimal CSS to handle the `required` field indicators: - Required labels get a `.required` class. - A red asterisk is displayed via the `:before` pseudo-element. --- ⚖️ License ---------- [](#️-license) Proprietary. Developed by [Thomas Kirsch](mailto:t.kirsch@webcito.de). ### Health Score 38 — LowBetter than 83% of packages Maintenance80 Actively maintained with recent releases Popularity11 Limited adoption so far Community7 Small or concentrated contributor base Maturity46 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~140 days Recently: every ~11 days Total 6 Last Release 105d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81) --- Top Contributors [![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (41 commits)") --- Tags ajaxbootstrapformform-validationjavascriptjqueryjquery-pluginvalidationjqueryajaxbootstrapform ### Embed Badge ![Health badge](/badges/webcito-jquery-form/health.svg) ``` [![Health](https://phpackages.com/badges/webcito-jquery-form/health.svg)](https://phpackages.com/packages/webcito-jquery-form) ``` ### Alternatives [proengsoft/laravel-jsvalidation Validate forms transparently with Javascript reusing your Laravel Validation Rules, Messages, and FormRequest 1.1k2.4M50](/packages/proengsoft-laravel-jsvalidation)[apy/jsfv-bundle Symfony2 Javascript Form Validation Bundle with localisation support 92773.7k](/packages/apy-jsfv-bundle)[lrgt/laravel-form-ajax-validation Make ajax validation with Laravel Requests for forms with bootstrap 435.7k](/packages/lrgt-laravel-form-ajax-validation)[palmtree/form Form builder with Bootstrap v5/v4 classes, validation, Recaptcha support, AJAX submissions and more 385.3k1](/packages/palmtree-form)[progsmile/request-validator Simple PHP Request Validator 37114.5k1](/packages/progsmile-request-validator)[stroker/form ZF2 module for extending forms with live clientside validation 4157.1k](/packages/stroker-form) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)