validations on input fields using GetOrgChart

Question

How to apply validations on input fields using GetOrgChart? i have used the following code..

json_data = $.rails.ajax url: "/organization_units.json" async: false dataType: "json"

$("#organization").getOrgChart
  gridView: false
  zoomable: true
  printable: true
  editable: true
  color: "neutralgrey"
  primaryColumns: ["Title", "Role","Members"]
  dataSource: json_data.responseJSON.tree_data

Answer 1

I have created an example for you, hit "Run Code Snippet" and try to update the Phone with invalid phone number.

$("#people").getOrgChart({		
    primaryColumns: ["Name", "Title"],
    dataSource: [
      { id: 1, parentId: null, Name: "Amber McKenzie", Title: "ESL teacher", Phone: "05454545454"},
      { id: 2, parentId: 1, Name: "Ava Field", Title: "Bricklayer",  Phone: "08888888888"},
      { id: 3, parentId: 1, Name: "Evie Johnson", Title: "Nursing aide", Phone: "077777777"}]
});   

$("#people").on("updateEvent", function( event, sender, args ) {  
   if (!/^\d+$/.test(args.data.Phone)){
    event.preventDefault();
    args.returnValue = false;
    alert(args.data.Name + ' cannot be updated because Phone number field is not in correct format!');
  } 
}); 

html, body {margin: 0px; padding: 0px;height: 100%; overflow: hidden; }
#people {width: 100%;height: 100%; } 

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>

I have created an example for you, hit "Run Code Snippet" and try to update the Phone with invalid phone number.
 



<link rel="stylesheet" type="text/css" href="//www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css">   
  
    
<script type='text/javascript' src="//www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script>


<div id="people"></div>