JQuery form: binding input controls with model, client side validation, client and server side summary
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
README.md

README.md

smarti.form.js

JQuery form: binding input controls with model, client side validation, client and server side summary

Automatically initializes when page is loaded. If content was loaded within ajax request, call JQuery extension method smarti() on container: $(container).smarti();

Examples: http://www.onitecsoft.com/smarti/form

Download

Dependencies: smarti.data.js

Structure:

<... data-name="..." data-smarti="form" ...> <!--container-->
  ...
</...>

Container html attribute reference:

attribute description
data-name Defines javascript instance name of type smarti.form
<div data-smarti="form" data-name="form">
...
</div>
data-data Defines model variable name bound to form (global scope)
<script>
  var item = {...};
</script>
<div data-smarti="form" data-name="form" data-data="item">
...
</div>
data-default-data Defines bound empty form js object (global scope)
<script>
  var item = {...};
  var defaultItem = {...};
</script>
<div data-smarti="form" data-name="form" data-data="item" data-default-data="defaultItem">
...
</div>
data-error-class Defines CSS class that will be applied to every form element with failed validation
<div data-smarti="form" data-name="form" data-error-class="...">
...
</div>

Inner elements html attribute reference:

attribute description
data-bind Defines model property name bound to value or checked property of HtmlElement
<input data-bind="Email" />
<input type="checkbox" data-bind="Active" />
data-prop Defines custom bound HtmlElement property name (should be set if it is other than value or checked)
<span data-bind="CssClass" data-prop="class"></span>
data-set, data-get Defines custom binding by js expression or external method. this - current HtmlElement, data - model bound to form (in case of expression). External method arguments: model and field - value of data-bind attribute
<script>
  //jquery ui datepicker example
  $(function () { $("#dateInput").datepicker(); });
  var getDate = function (model, field) {
    model.Date = $(this).datepicker('getDate');
    //or
    smarti.data.set(field, model, $(this).datepicker('getDate'));
    //second way is useful for global binders
  }
</script>
<input id="dateInput" data-set="$(this).datepicker('setDate', data.Date)" data-get="getDate" />
data-req-field Defines required property of js object bound to form. Can be multiple fields separated by ,. When failed data-error-class will be applied to current element and data-msg with same value will be shown
<input data-bind="Name" data-req-field="Name" />
<input data-bind="Field1" data-req-field="Field1,Field2" />
data-req-rule Defines custom validation rule by external js method that returns true or false. this - current HtmlElement (useful when single rule applied for different inputs), method argument - js object bound to form (filled with form values right before validation). Multiple rules separated by , can be applied to single element
<script>
  var emailValidator = function (e) { return e.Email != ''; }
  var globalEmailValidator = function (e) { return this.value != ''; }
  var rule1 = function(e) { return ... }
  var rule2 = function(e) { return ... }
</script>
<input data-bind="Email" data-req-rule="emailValidator" />
<input data-bind="SomeField" data-req-rule="rule1,rule2" />
<!-- Email1 and Email2 are used as unique rule names for data-error-class and data-msg -->
<input data-bind="Email1" data-req-rule="Email1:globalEmailValidator" />
<input data-bind="Email2" data-req-rule="Email2:globalEmailValidator" />
data-error-class Defines CSS class that will be applied to current element when validation fail
<input data-bind="Name" data-req-field="Name" data-error-class="invalid2" />
data-msg Defines message to show when validator with same name will fail. Message can have multiple names separated by , in case if it belongs to multiple validators. By default all elements with data-msg attribute are hidden
<div data-msg="Email">Wrong email!</div>
<div data-msg="Firstname,Lastname">Required fields must be filled!</div>
data-reset Defines reset button (click will execute form load method with default or empty js object)
<input type="button" value="Reset" data-reset="true" />
data-save Defines save button. Attribute value represents external method that will be executed if client validation succeed.
<input type="button" value="Save" data-save="saveForm" />
<script>
  var saveForm = function(formData) {
    $.post('/product/save', formData, function(data){
      form.summary(data.errors);
      ...
    })
  }
</script>

API reference:

member description
object data Represents bound to form js object
<script>
  var data = form.data;
</script>
object defaultData Represents bound empty form js object
<script>
  var defaultData = form.defaultData;
</script>
string errorClass Represents common validation error CSS class
<script>
  var errorClass = form.errorClass;
</script>
void load(data = null) Fills form with model if specified, otherwise defaultData or empty js object is used
<script>
  form.load();
  var data = { ... };
  form.load(data);
</script>
void sync(data = null) Binds form to model and updates form state from model. Argument represents an object that extend model before update form.
<select onchange="form.sync()">...</select>
<select data-bind="CategoryId" onchange="form.sync({ProductId:null})">...</select>
bool save(data = null) Updates data if specified with form values, otherwise form member data is used. Returns true if validation succeeds
<script>
var data = {};
var success = form.save(data);
//or
if(form.save()) data = form.data;
</script>
void summary(ruleNames) Toggles visibility of elements with data-msg attribute and toggles data-error-class on elements with data-req-field and data-req-rule attributes. ruleNames is an array of failed validator names (Used to show server side validation result)
<script>
  form.summary(['Name','Email','rule1',...]);
</script>