2017 © Pedro Peláez
 

silverstripe-module silverstripe-knockout-forms

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

image

antonythorpe/silverstripe-knockout-forms

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

  • Friday, February 17, 2017
  • by AntonyThorpe
  • Repository
  • 1 Watchers
  • 2 Stars
  • 24 Installations
  • PHP
  • 0 Dependents
  • 0 Suggesters
  • 1 Forks
  • 0 Open issues
  • 9 Versions
  • 4 % Grown

The README.md

silverstripe-knockout-forms

Provides an enhanced UX for Silverstripe forms using the Knockout MVVM JavaScript library plus an associated validation plugin, (*1)

CI Scrutinizer Code Quality Latest Stable Version Total Downloads Latest Unstable Version License, (*2)

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

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., (*3)

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

Documentation

Index, (*4)

Future Development Ideas

  • Add additional fields
  • Explore the use of knockout-pre-render 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

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., (*5)


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";

    /**
     * casting of variables for security purposes
     */
    protected $casting = array(
        "Observable" => "Varchar",
        "BindingType" => "Varchar",
        "OtherBindings" => "Varchar",
        "HasFocus" => "Varchar"
    );

If needed add the __construct function to overriding the field's class., (*6)

Adapt the Frameworks form templates to incorporate Knockout's binding handlers and save into templates/AntonyThorpe/Knockout., (*7)

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

None sorry., (*8)

Change Log

Link, (*9)

Contributions

Link, (*10)

License

MIT, (*11)

The Versions

17/02 2017

dev-master

9999999-dev

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

  Sources   Download

MIT

The Requires

 

The Development Requires

silverstripe forms knockoutjs knockout form validation knockout-validation

17/02 2017

1.3.0

1.3.0.0

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

  Sources   Download

MIT

The Requires

 

The Development Requires

silverstripe forms knockoutjs knockout form validation knockout-validation

05/06 2016

1.2.3

1.2.3.0

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

  Sources   Download

MIT

The Requires

 

The Development Requires

silverstripe forms knockoutjs knockout form validation knockout-validation

06/04 2016

1.2.2

1.2.2.0

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

  Sources   Download

MIT

The Requires

 

The Development Requires

silverstripe forms knockoutjs knockout form validation knockout-validation

17/12 2015

1.2.1

1.2.1.0

Provides an enhanced UX for Silverstripe forms using Knockout MVVM JavaScript library plus an associated validation plugin. Silverstripe creates a form, specifying the Knockout styled ones, and validation needs are added to observables via a Knockout extension. Default messages are available or can be customised. The form will only submit once all front-end validation rules are satisfied.

  Sources   Download

MIT

The Requires

 

silverstripe forms knockoutjs form validation knockout-validation

15/12 2015

1.2.0

1.2.0.0

Provides an enhanced UX for Silverstripe forms using Knockout MVVM JavaScript library plus an associated validation plugin. Silverstripe creates a form, specifying the Knockout styled ones, and validation needs are added to observables via a Knockout extension. Default messages are available or can be customised. The form will only submit once all front-end validation rules are satisfied.

  Sources   Download

MIT

The Requires

 

silverstripe forms knockoutjs form validation knockout-validation

16/07 2015

1.1.0

1.1.0.0

Provides an enhanced UX for Silverstripe forms using Knockout MVVM JavaScript library plus an associated validation plugin. Silverstripe creates a form, specifying the Knockout styled ones, and validation needs are added to observables via a Knockout extension. Default messages are available or can be customised. The form will only submit once all front-end validation rules are satisfied.

  Sources   Download

MIT

The Requires

 

silverstripe forms knockoutjs form validation knockout-validation

15/07 2015

1.0.2

1.0.2.0

Provides an enhanced UX for Silverstripe forms using Knockout MVVM JavaScript library plus an associated validation plugin. Silverstripe creates a form, specifying the Knockout styled ones, and validation needs are added to observables via a Knockout extension. Default messages are available or can be customised. The form will only submit once all front-end validation rules are satisfied.

  Sources   Download

MIT

The Requires

 

silverstripe forms knockoutjs form validation knockout-validation

14/07 2015

1.0.1

1.0.1.0

Provides an enhanced UX for Silverstripe forms using Knockout MVVM JavaScript library plus an associated validation plugin. Silverstripe creates a form, specifying the Knockout styled ones, and validation needs are added to observables via a Knockout extension. Default messages are available or can be customised. The form will only submit once all front-end validation rules are satisfied.

  Sources   Download

MIT

The Requires

 

silverstripe forms knockoutjs form validation knockout-validation