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,

score 1 · Answer 1 · answered Oct 09 '13 at 02:17

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)

score 0 · Answer 2 · answered Sep 03 '13 at 18:56

0

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

answered Sep 03 '13 at 18:56

Bradley Trager

3,570
3
26
33

Thanks man! I havn't gotten any responses, and posted this similar question three times now in different ways of explaining it. The validation we are using is implemented, and working for the most part. I just need to know how to stop the propagation of the onAfterChange event from firing to the view, and validate, then allow the view to update the binded property. Don't know why it is causing so many issues.. Thanks again, I will check it out. – Ronny Sep 04 '13 at 03:07

score 0 · Answer 3 · answered Sep 05 '13 at 18:18

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/

score 0 · Answer 4 · answered Oct 10 '13 at 15:25

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!

Validationwith two-way dat-bind in jsViews

4 Answers4