Validationwith two-way dat-bind in jsViews

Question

Trying to find out an elegant way to handle validation client side on a two-way data bound property in jsViews template. As an example to reference, please look at the PI documentation for jsViews two-way binding at jsView's API link here: http://www.jsviews.com/#jsvplaying.

I want to validate the "name" when updating the property before the view is updated with the new value. Any examples/guidance/ideas would be highly appreciated!

Thanks,

Answer 1

Try parsleyjs. It is a very easy to use javascript library for doing all sorts of validation.

Answer 2

I found the answer I was looking for. The version I was using, did not have a cancel method when using $.observable, and or updating the properties. Solution here:

When I am in the modal to change the settings of the property, I set a global property, so that the onBeforeChange event returns false. I then do my validation on the new value the user entered. If it passes validation, I then update it via observable, setProperty, and then switch off the global setting. This allows the biding to update accordingly in the view, but not update before validation occur.

An example, simple example, of this can be found in the following

 <table><tbody id="pageList"></tbody></table>

 //template for the table
 <script id="pageTmpl" type="text/x-jsrender">  
  {^{for pages}}
    <tr>
       <td data-link="name"></td>
       <td>
          <input data-link="name" class="page-names"/>
       </td>
       <td>
         <button id="save" class="saveCmd">Save</button>           
         <button id="cancel"  class='cancelCmd'>Cancel</button>                      
       </td>
    </tr>
  {{/for}}
 </script>

And the javascript to push it:

  var isModal = true;
  $.views.helpers({
    onBeforeChange: function(ev, data)
    {            
               //this would be global setting if in a modal              
               if(isModal)          
               {                
                  return false;   
                }
    },
    onAfterChange: function (ev, data)
    {           
       //this would be global setting if in a modal 
              if(isModal)           
              {                
                return false;   
              }
            }
         });


   $(document).ready(function(){      
   //not used at moment!!!
   $(".saveCmd").on("click", function(){         
      var dataItem = $.view(this).data,
          newVal   = $(this).parent().parent().find('input').val();

      //validate newValue
      if(!ValueIsValid(newVal))
      {
           alert("Must be 10 characters or less!");   
      }
      else
      {
         isModal = false;
         $.observable(dataItem).setProperty("name", newVal);            
         isModal = true;

      }
   });
   $(".cancelCmd").on("click", function(){
      var dataItem = $.view(this).data;         
      $(this).parent().parent().find('input').val(dataItem.name);          
   });
});

  //KETHCUP VALIDATION FUNCTION mock example
  function ValueIsValid(val)
  {       
   return val.length < 11;
  }

//variables and setup for initial objec.
var myTemplate = $.templates("#pageTmpl");

var pages = [
{
  name: "Q100"
},
{
  name: "Q200"
}
];

var app = {
 pages: pages
};

var counter = 1;

myTemplate.link("#pageList", app);    

link to demo at fiddle: http://jsfiddle.net/Duj3F/171/

Answer 3

There are now a number of samples on jsviews.com which show one approach to validation.

• A JsViews "validate" tag control
• Generic edit control - the base class for the validate control
• Datepicker with validation
• Datepicker with validation (wizard) (How to use the validation group control in association with stepping through a wizard. Happens to use the datepicker in this example)

Answer 4

The issue was worked out by returning false, dirring the "onBeforeChange" event in jsViews. So, we have a switch, that if validation is triggered, that switch gets turned on, and does not allow updating to occur for the bound elements. Once the validation is fixed, we then turn that switch off, and "onBeforeChange" runs through. I appologize for the confusion on the question, but it wasn't the validation that was a problem needing a solution, but how to interrupt jsViews from updating a data bound object in two way binding. Thanks for everyone's help!