anchor.diff:                      
                       <h:formEntry>
                           <div class="input-group">
  -                            <input class="form-control" type="text" id="newRole" placeholder="Add new role"/>
  +                            <input class="form-control" type="text" id="newRole" placeholder="Add new role" oninput="validateForm();"/>
                               <span class="input-group-btn">
  -                                <button class="btn btn-default" type="button" id="btnNewRole" onclick="addRole();"><span class="glyphicon glyphicon-plus"></span></button>
  +                                <button class="btn btn-default" type="button" id="btnNewRole" onclick="addRole();" disabled="disabled"><span class="glyphicon glyphicon-plus"></span></button>
                               </span>
                           </div>
                       </h:formEntry>
  
positive.code:     
      //clear entry box
      $('#newRole').val ( "" );
  }
  </script>
  
  
negative.code: </div>
  
  <script type="text/javascript">
  
  function validateForm() {
  	$('#btnNewRole').prop("disabled", !shouldEnable());
  }
  
  function shouldEnable () {
  	var val = $('#newRole').val ();
  	if ( val == "" ) {
  		return false;	
  	}
  	
  	return true;
  }
  
  validateForm ();
  
  function addRole() {
      var val = $('#newRole').val ();
      
  