jQuery.my  
jQuery plugin that binds HTML with JS objects. In real-time.

  What is this?
How it works?

Play with this form...

Sort Premium Standard Lowcost
Qty
12 piles
Size  mm A6 A5 A4 A3
Price $140

➜

...and watch its data

-

Why $.my is so sweet?

Validation. It's comprehensive and not only accepts regexps as mask, but also strings, arrays and functions.

Speed. Any option you change or any character you type forces immidiate revalidation and recalc.

Conditional formatting. Form can change its appearance according to the values entered.

Recalc. jQuery.my recalculates and redraws dependent fields in real-time. Looping dependencies are resolved correctly.

Complex mapping. Bind one HTML control to many fields, combine many inputs into one data field. In the demo above size input is splitted into x and y.

Non-standard controls. $.my recognizes standard HTML controls as well as composite controls rendered by tagstrip, jQuery Mobile and several jQuery UI widgets. List is growing.

It's bi-directional. You can change javascript data – entire set or several fields, and the form will be revalidated and redrawn.

It's short. About 14kB unzipped. Note that $.my requires not only jQuery but SugarJS as well – without Sugar it'll be twice as long. And I believe you will enjoy Sugar as I did )

And it's simple. No new-and-absolutely-unique syntax. No complicated abstraction layers. No schemas. Minimal useful subset of params is very compact.

Two examples

$("#example1").my({
 ui: {
  "#w": {bind:"x", check:/^\d{1,2}$/, 
         recalc:"#area"},
  "#h": {bind:"y", check:/^\d{2,3}$/, 
         recalc:"#area"},
  "#area": {
     bind: function(data, val) {
       return Math.round(data.x*data.y);
     }
   }
}});
 ×  = 12

This code binds #w and #h inputs (childs of #example1) with x and y fields in data. $.my will check if x has 1–2 digits and y has 2–3 digits. HTML element with id="area" will be filled with the product of x and y.

By the way calling $("#example1").my("data",{x:15}) after init will set x to 15 and redraw the form with new value in #area element.

$("#example2").my({
 data: {pwd:""}, 
 ui: {
  "#pass": {
   bind:"pwd", 
   check:function (data, val) {
    return (/^[a-z0-9]{3,8}$/i).test(val)?"":
      "3–8 latin chars and/or nums!";
   }, 
   css:{
    "yellow": /^[a-z0-9]{3,5}$/, 
    "green": /^[a-z0-9]{6,8}$/
}}}});

This code will create validator for #pass input, the child of #example2 element. Also the code will apply class named «yellow» if password is weak and «green» if it's ok.

· Download! · 
data: {{7}
  size: {
    width: {1}, height: {2}
  },
  qty: {amount: {3}, vol: {4}},
  sort: "{5}", 
  total: {6}
}