Knockout-Validation lib – clean patterns

Knockout-Validation on GitHub

which also leverages the jQueryValidation lib

All Bootstrap v3 compatible

Coolest architectural nugget = applying validation rules to VM observables (not inside HTML <input> markup)

one clear reason why that is a better way -> when the VM field is bound to multiple UI points, you only define the rule once vs many

see the wiki for all Native and User Contributed rules available OOB.
 
above field name in error message examples require the following global rule.message tweak…

overriding default error messages

** must execute BEFORE all observable.extend definitions on your VM **

HTML sample – basic knockout data-bind’ing (in case you’re new : )

HTML sample – summary error block

 

summary with errors listed

 

initialization

clear error boxes when blanking out properties (e.g. after a save)

gotta have a handy isValid right?

** must execute AFTER all observable.extend definitions on your VM **

Usage

CSS for comprehensiveness ( < word?)… completeness? arrrg what is the phrase that pays here (alternative languages welcome : )

Knockout, Validation, Bootstrap skinned File Input

 

Visual example:


 
Highlights:

  • Skinning the native html <input type=”file”> by setting it’s opacity=0 and positioning above a bootstrap looking button… this way when you click the pretty button you’re really clicking on the invisible native button which launches the file open dialog.
  • Bootstrap input-group aesthetically bundles the visual elements – file button, filename box, valiation message and clear button
  • Knockout Custom Binding on the file input change event to save into VM observable
  • Knockout-Validation lib to require selected file to be an image type – nice thing here is keeping that logic in the js ViewModel vs dirtying the html with it.
     
     

Live Demo:

See the Pen Knockdown, Validated, Bootstrap skinned File Input by Brent Anderson (@Beej2020) on CodePen.