Backform Group Controls

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<header>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>ESDoc-ERRATA OAuth</title>
</header>
<script src="3rd/jquery.min.js" type="text/javascript"></script>
<script src="3rd/bootstrap2.3.min.js" type="text/javascript"></script>
<link href="3rd/bootstrap2.3.min.css" rel="stylesheet" type="text/css" charset="utf-8">
<script src="3rd/bootstrap-datepicker.js" type="text/javascript"></script>
<link href="3rd/bootstrap-datepicker.css" rel="stylesheet" type="text/css" charset="utf-8">
    
<script src="3rd/underscore.js" type="text/javascript"></script>
<script src="3rd/backbone.js" type="text/javascript"></script>
    
<script src="3rd/backform.js" type="text/javascript"></script>
<script src="backform.js" type="text/javascript"></script>
<style type="text/css">
      .navbar-inner {border-radius: 0;}
      #wrap {min-height: 100%; height: auto!important; margin: 0 auto -60px;}
      #push {height: 60px;}
      </style>
<br/>

          <h3>ESDoc-ERRATA Issue Creation Form</h3>
          <div class="col-sm-8">
          <form id="form-errata" class="form-horizontal"></form>
          </div>
          <div class="col-sm-8">
            <pre id="nested-object"></pre>
          </div>

</html>

JavaScript

$(document).ready(function() {
  
  function generateUUID() {
    var d = new Date().getTime();
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random()*16)%16 | 0;
        d = Math.floor(d/16);
        return (c=='x' ? r : (r&0x3|0x8)).toString(16);
    });
    return uuid;
};

  var currentdate = new Date(); 
  var datetime = currentdate.getFullYear()+ "-"
                + currentdate.getDate() + "-"
                + (currentdate.getMonth()+1)  + " " 
                + currentdate.getHours() + ":"  
                + currentdate.getMinutes() + ":" 
                + currentdate.getSeconds();
  var initialLabels = { 'institution_id': 'Institution-id', 'model': 'Model', 'experiment_id': 'Experiment', 'variable_id': 'Variable'};
  var issueData = new Backbone.Model(
    {uid: generateUUID(), status: "new", dateCreated: datetime, dateUpdated: datetime, url: "", materials: "", project: "cmip6", activity_id: "cmip", institution_id: "ipsl", severity: "high", source_id: "nicam16-9s", experiment_id: "ssp245-ghg", variable_id: "tasmin", datasets: "CMIP6.CMIP.NOAA-GFDL.NICAM16-9S.ssp245-ghg.r1i1p1f1.Amon.tasmin.gn.v20170322,CMIP6.CMIP.NOAA-GFDL.giss-e2-1g.ssp245-ghg.r1i1p1f1.Amon.tasmin.gn.v20170324"}
  );


  var jsonFacets = JSON.parse(`{
  "cmip6": {
    "institute_id": "Institute",
    "source_id": "Model",
    "experiment_id": "Experiment",
    "variable_id": "Variable"
  }
}`);
  // Example with input of type email
   new Backform.Form({
    el: $("#form-errata"),
    model: issueData,
    fields: [
    {
      name: "uid",
      label: "UUID",
      control: "input",
      disabled: "disabled",
      required: true
    },
    {
      name: "title",
      label: "Title",
      control: "input",
      required: true
    }, 
    {
      name: "description",
      label: "Description",
      control: "textarea",
      required: true
    },
    {
      name: "institution_id",
      label:...