PHPackages                             antonythorpe/silverstripe-knockout-forms - 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. [Templating & Views](/categories/templating)
4. /
5. antonythorpe/silverstripe-knockout-forms

ActiveSilverstripe-vendormodule[Templating & Views](/categories/templating)

antonythorpe/silverstripe-knockout-forms
========================================

Provides an enhanced UX using the Knockout MVVM JavaScript library, plus an associated validation plugin, with Silverstripe forms. Silverstripe generates a form, specifying the Knockout styled form fields, and validation needs are added to observables via a Knockout js extension. Default messages are available or can be customised. The submit button will only be enabled upon satisfaction of all the validation rules.

4.0.0(1y ago)3681MITPHP

Since Jul 14Pushed 1y ago1 watchersCompare

[ Source](https://github.com/AntonyThorpe/silverstripe-knockout-forms)[ Packagist](https://packagist.org/packages/antonythorpe/silverstripe-knockout-forms)[ RSS](/packages/antonythorpe-silverstripe-knockout-forms/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (4)Versions (18)Used By (0)

silverstripe-knockout-forms
===========================

[](#silverstripe-knockout-forms)

Provides an enhanced UX for Silverstripe forms using the Knockout MVVM JavaScript library plus an associated validation plugin

[![CI](https://github.com/AntonyThorpe/silverstripe-knockout-forms/actions/workflows/ci.yml/badge.svg)](https://github.com/AntonyThorpe/silverstripe-knockout-forms/actions/workflows/ci.yml)[![Scrutinizer Code Quality](https://camo.githubusercontent.com/16341fbc56d01b0271c6611a928efe70e027d659da804e5339b225547fb6b1f3/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f416e746f6e7954686f7270652f73696c7665727374726970652d6b6e6f636b6f75742d666f726d732f6261646765732f7175616c6974792d73636f72652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/AntonyThorpe/silverstripe-knockout-forms/?branch=master)[![Latest Stable Version](https://camo.githubusercontent.com/0490b23be824c2540b5e5bfe23c0a657c98a5c4591b83bf50957489019b468d3/68747470733a2f2f706f7365722e707567782e6f72672f616e746f6e7974686f7270652f73696c7665727374726970652d6b6e6f636b6f75742d666f726d732f762f737461626c65)](https://packagist.org/packages/antonythorpe/silverstripe-knockout-forms)[![Total Downloads](https://camo.githubusercontent.com/5447c349889a7fc6859f3aa7da75008c8318f18ce82febed1b73205d95e0367a/68747470733a2f2f706f7365722e707567782e6f72672f616e746f6e7974686f7270652f73696c7665727374726970652d6b6e6f636b6f75742d666f726d732f646f776e6c6f616473)](https://packagist.org/packages/antonythorpe/silverstripe-knockout-forms)[![Latest Unstable Version](https://camo.githubusercontent.com/4b352bb995dcbb4a494fed7584c3939573a2ffc13dc19747ecdb1f583dc71121/68747470733a2f2f706f7365722e707567782e6f72672f616e746f6e7974686f7270652f73696c7665727374726970652d6b6e6f636b6f75742d666f726d732f762f756e737461626c65)](https://packagist.org/packages/antonythorpe/silverstripe-knockout-forms)[![License](https://camo.githubusercontent.com/ec4b4f8ba23c2b84f35ca6e037a9906d54bb4edea723533af23e4b15dc9b80eb/68747470733a2f2f706f7365722e707567782e6f72672f616e746f6e7974686f7270652f73696c7665727374726970652d6b6e6f636b6f75742d666f726d732f6c6963656e7365)](https://packagist.org/packages/antonythorpe/silverstripe-knockout-forms)

Why use this Silverstripe module?
---------------------------------

[](#why-use-this-silverstripe-module)

- Prevent incorrect form submission
- Live validation responses
- Present messages via span element or tooltip
- Browser support back to ie6

How it works
------------

[](#how-it-works)

Add validation needs to the observables in a Knockoutjs viewModel. Next, utilising the Knockout Form Fields, use Silverstripe to create the form. Upon bind, the field values are passed into the observables via a custom binding handler. The rules placed upon the observable will control the field validation.

The Approach of this Module
---------------------------

[](#the-approach-of-this-module)

- Extend Silverstripe form fields to place a Knockout observable and the value on the element
- Use Knockout-Validation to validate the fields
- Option to disable the submit button until all rules are satisfied

Requirements
------------

[](#requirements)

- [Silverstripe](http://www.silverstripe.org)
- [Knockoutjs](http://knockoutjs.com/documentation/introduction.html)
- [Knockout-Validation](https://github.com/Knockout-Contrib/Knockout-Validation)

Documentation
-------------

[](#documentation)

[Index](/docs/en/index.md)

Future Development Ideas
------------------------

[](#future-development-ideas)

- Add additional fields
- Explore the use of [knockout-pre-render](https://github.com/ErikSchierboom/knockout-pre-rendered) for the display of data in a grid (would replace the setKnockout binding handler and restructure the templates/tests). This library is currently only one dimensional.

Pull Requests are Welcome
-------------------------

[](#pull-requests-are-welcome)

The recommended approach is to extend an existing Silverstripe field. Ensure that the appropriate Binding Type is specified and cast getters from trait class `Common.php` and add any needed methods.

```
namespace AntonyThorpe\Knockout;

require_once('Common.php');
use SilverStripe\Forms\????Field;

/**
 * Knockout NameOfNewField
 *
 * Creates a {@link NameOfNewField} with an additional data-bind attribute that links to a Knockout observable
 */
class KnockoutNameOfField extends ????Field
{
    use \Knockout\Common;

    /**
     * bindingType
     */
    protected $bindingType = "theKnockoutBindingHandler";
```

If needed add the `__construct` function to overriding the field's class.

Adapt the Frameworks form templates to incorporate Knockout's binding handlers and save into `templates/AntonyThorpe/Knockout`.

### Tests

[](#tests)

- Create a model test for the new form field
- Update `KnockoutFormTest.php` and `KnockoutFormTestController.php` to test the creation of the binding handler in HTML.
- Add the new Knockout field to the form function within the KnockoutFormTestController class
- Add a new assertion to the testKnockoutForm function within the KnockoutFormTest class
- Add to `docs/en/documentation.md`

Support
-------

[](#support)

None sorry.

Change Log
----------

[](#change-log)

[Link](changelog.md)

Contributions
-------------

[](#contributions)

[Link](contributing.md)

License
-------

[](#license)

[MIT](LICENSE)

###  Health Score

35

—

LowBetter than 79% of packages

Maintenance34

Infrequent updates — may be unmaintained

Popularity13

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity72

Established project with proven stability

 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 ~205 days

Recently: every ~302 days

Total

17

Last Release

669d ago

Major Versions

1.3.0 → 2.0.02018-11-25

2.3.0 → 3.0.02023-05-22

3.0.1 → 4.0.02024-07-09

PHP version history (2 changes)1.0.1PHP >=5.4.0

1.2.2PHP ^5.4

### Community

Maintainers

![](https://www.gravatar.com/avatar/cd6026ff6f6d02bf4f4f1f5fe1c3a611dbf1ae6f95e0c3a7993c6520bb1e8e2f?d=identicon)[AntonyThorpe](/maintainers/AntonyThorpe)

---

Top Contributors

[![AntonyThorpe](https://avatars.githubusercontent.com/u/1023740?v=4)](https://github.com/AntonyThorpe "AntonyThorpe (52 commits)")

---

Tags

formknockoutjssilverstripesilverstripeform validationknockoutjsFormsknockoutKnockout-Validation

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/antonythorpe-silverstripe-knockout-forms/health.svg)

```
[![Health](https://phpackages.com/badges/antonythorpe-silverstripe-knockout-forms/health.svg)](https://phpackages.com/packages/antonythorpe-silverstripe-knockout-forms)
```

###  Alternatives

[unclecheese/bootstrap-forms

Allows you to create forms in SilverStripe that are compatible with Twitter Bootstrap.

5539.4k](/packages/unclecheese-bootstrap-forms)[silverstripe-themes/simple

The SilverStripe simple theme (default SilverStripe 3 theme)

411.3M8](/packages/silverstripe-themes-simple)[silverstripe/login-forms

A collection of templates for the CMS login screens

191.3M26](/packages/silverstripe-login-forms)[stevie-mayhew/silverstripe-svg

Basic SVG support for SilverStripe

23326.5k4](/packages/stevie-mayhew-silverstripe-svg)[rywa/silverstripe-foundation-forms

Add ZURB Foundation framework forms compatibility to SilverStripe 3

126.4k](/packages/rywa-silverstripe-foundation-forms)[axllent/silverstripe-tiled-gridfield

Inline/tiled images in a Silverstripe GridField table

163.2k](/packages/axllent-silverstripe-tiled-gridfield)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)