diff --git a/dmp-frontend/src/app/app.component.css b/dmp-frontend/src/app/app.component.css
index a5d0bf7e9..578792487 100644
--- a/dmp-frontend/src/app/app.component.css
+++ b/dmp-frontend/src/app/app.component.css
@@ -4,4 +4,15 @@
 
 .show {
     display:block;
-}
\ No newline at end of file
+}
+
+.ng-valid[required], .ng-valid.required  {
+    border-left: 5px solid #42A948; /* green */
+  }
+  
+  .ng-invalid:not(form)  {
+    border-left: 5px solid #a94442; /* red */
+  }
+  .errorMessage{
+    color:red;
+  }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 30e735907..cacaad3f6 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -20,37 +20,20 @@ import { GroupBase } from './dynamic-form-group/group-base';
 export class DynamicFormComponent implements OnInit {
 
   @Input() dataModel: DataModel = new DataModel();
-  form: FormGroup;
-  
-  payLoad = '';
-
-  
-  
+  form: FormGroup;  
+  payLoad = '';    
   
   constructor(private qcs: FieldControlService, private serverService: ServerService,  private dataModelService: dataModelBuilder, private router: Router, private route: ActivatedRoute) {
     this.form = this.qcs.toFormGroup(new Array(), new Array());
   }
-
   
-    getSubForm(subformName){
-      return this.form.controls[subformName];
-    }
+  
+  getSubForm(subformName){
+    return this.form.controls[subformName];
+  }
   
   
   ngOnInit() {
-    /*
-    //this.form = this.qcs.toFormGroup(this.fields);
-    this.serverService.getHTTPFields()
-      .subscribe(
-      (data: any[]) => {
-        this.fields = this.fieldVisibility.getFieldVisibility(data);
-        this.form = this.qcs.toFormGroup(this.fields);
-        console.log(this.fields);
-      },
-      (error) => console.log(error)
-      );
-    //this.buildForm();
-    */
 
     console.log("DynamicFormComponent.ngOnInit() -- RUNNIGN");
     
@@ -75,29 +58,6 @@ export class DynamicFormComponent implements OnInit {
       },
       (error) => console.log(error)
       );
-    /*
-    
-    this.serverService.getFields()
-      .subscribe(
-      (data: any[]) => {
-        
-        console.log("this.serverService.getFields");
-        
-        this.dataModel = new DataModel();
-        this.dataModel = this.fieldVisibility.getDataModel(data);
-        
-        this.form = this.qcs.toFormGroupAlt(this.dataModel.fields, this.dataModel.groups);
-        //this.form = this.qcs.toFormGroup(this.fields);
-        
-        console.log("SUMMARY: ======>");
-        console.log(this.dataModel);
-        console.log(this.form);
-        
-      },
-      (error) => console.log(error)
-      );
-    
-    */
     
   }
 
diff --git a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
index 49f7c1c15..9c6747eda 100644
--- a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
+++ b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
@@ -52,9 +52,12 @@
                 </div>
             </ng-container>
         </div>         
-       
-        
+
     </div>
+    
+      <div class= "errorMessage" *ngIf="!isValid">{{field.label}} is required</div>
+
+    
 </div>
 
 <!-- <div [formGroup]="form" class="form-group" [ngSwitch]="field.controlType">
diff --git a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts
index 196ff589e..b70087e5b 100644
--- a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts
+++ b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts
@@ -17,8 +17,8 @@ export class DynamicFormFieldComponent {
     @Input() field: FieldBase<any>;
     @Input() form: FormGroup;
   
-    get isValid() { 
-      return true; //return this.form.controls[this.field.key].valid; 
+    get isValid() { debugger;
+      return this.form.controls[this.field.key].valid; 
     }
 
     public ngOnInit() { //dropdown lists take only one of the available sources
diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.html b/dmp-frontend/src/app/form/tableOfContents/toc.component.html
index 5c978b824..4af29a0dc 100644
--- a/dmp-frontend/src/app/form/tableOfContents/toc.component.html
+++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.html
@@ -1,7 +1,10 @@
-<nav id="toc" data-toggle="toc">
-<ul class="nav flex-column">
-    <li class="nav-item" >
-         <a class="nav-link" *ngFor ="let header of headers" href="#">{{header}}</a>
-        </li>
-    </ul>
-</nav>
+<body data-spy="scroll" data-target="#toc">
+        <nav id="toc" data-toggle="toc">
+                <ul class="nav flex-column">
+                    <li class="nav-item" >
+                         <a class="nav-link" *ngFor ="let group of dataModel.groups" href="#group.key">{{group.title}}</a>
+                        </li>
+                    </ul>
+                </nav>
+</body>
+
diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.ts b/dmp-frontend/src/app/form/tableOfContents/toc.component.ts
index 92b58bffc..12aa99c8b 100644
--- a/dmp-frontend/src/app/form/tableOfContents/toc.component.ts
+++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.ts
@@ -11,7 +11,7 @@ export class TocComponent implements OnInit{
     private headers = new Array();
 
     ngOnInit(){
-      var len =  this.dataModel.groups.length;
+      var len =  this.dataModel.groups.length; // I don't use headers , I use datamodel.groupfields
       for (var i=0; i<len; i++){
         this.headers.push (this.dataModel.groups[i].title)
       }
diff --git a/dmp-frontend/src/app/login/login-page.ts b/dmp-frontend/src/app/login/login-page.ts
index a2853c275..71b739d35 100644
--- a/dmp-frontend/src/app/login/login-page.ts
+++ b/dmp-frontend/src/app/login/login-page.ts
@@ -36,7 +36,7 @@ export class LoginComponent implements OnInit{
       console.log('Name: ' + profile.getName());
       localStorage.setItem('currentUser', JSON.stringify(googleUser));
       //this.router.navigateByUrl('dynamic-form');
-      this.ngZone.run(() => this.router.navigateByUrl('projects'))
+      this.ngZone.run(() => this.router.navigateByUrl('projects'));
       //this.router.navigate(['/projects']);
     }
 
diff --git a/dmp-frontend/src/app/services/dataModelBuilder.service.ts b/dmp-frontend/src/app/services/dataModelBuilder.service.ts
index caf0eab5d..a5103f18c 100644
--- a/dmp-frontend/src/app/services/dataModelBuilder.service.ts
+++ b/dmp-frontend/src/app/services/dataModelBuilder.service.ts
@@ -45,7 +45,6 @@ export class dataModelBuilder {
                             label: element.title.__cdata,
                             key:element._id,
                             value: element.value,
-                            required: true,
                             order:element._ordinal,
                             rules: element.visible.rule != undefined ?  element.visible.rule: rule,
                             visible: element._defaultVisibility,
@@ -62,7 +61,6 @@ export class dataModelBuilder {
                             label: element.title.__cdata,
                             key:element._id,
                             value: element.value,
-                            required: true,
                             order:element._ordinal,
                             rules: element.visible.rule != undefined ?  element.visible.rule: rule,
                             visible: element._defaultVisibility,
@@ -78,7 +76,6 @@ export class dataModelBuilder {
                             label: element.title.__cdata,
                             key:element._id,
                             value: true,
-                            required: true,
                             order:element._ordinal,
                             rules: element.visible.rule != undefined ?  element.visible.rule: rule,
                             visible: element._defaultVisibility,
@@ -95,7 +92,6 @@ export class dataModelBuilder {
                             label: element.title.__cdata,
                             key:element._id,
                             value: true,
-                            required: true,
                             order:element._ordinal,
                             rules: element.visible.rule != undefined ?  element.visible.rule: rule,
                             visible: element._defaultVisibility,
@@ -219,6 +215,8 @@ export class dataModelBuilder {
             newAttribute.ordinal = attr._ordinal;
             newAttribute.sources = new Array();
             newAttribute.sources.push(attr.sources.source);
+            newAttribute.validation = new Array();
+            //newAttribute.validation.push(attr.validation.rule);
 
             newAttribute.sources.forEach(src => {
                 src.params=new Array();
@@ -230,11 +228,28 @@ export class dataModelBuilder {
                 }
                    
             });
-            newAttribute.validation = attr.validation;
+
+            if (attr.validation.rule.length)
+                for (var i=0, len=attr.validation.rule.length; i<len; i++){
+                    let rule = new Rule();
+                    rule.ruleStyle= attr.validation.rule[i]._ruleStyle;
+                    rule.ruleType= attr.validation.rule[i]._type;
+                    newAttribute.validation.push(rule);
+                }
+                   
+            else{
+                if(attr.validation.rule){
+                    let rule = new Rule();
+                    rule.ruleStyle= attr.validation.rule._ruleStyle;
+                    rule.ruleType= attr.validation.rule._type;
+                    newAttribute.validation.push(rule);
+                }
+            }
 
             console.log(newAttribute);
             attribute.push(newAttribute);
             fields.find(x => x.key == newAttribute.id).attributes.sources = newAttribute.sources;
+            fields.find(x => x.key == newAttribute.id).attributes.validation = newAttribute.validation;
         });
 
 
diff --git a/dmp-frontend/src/app/services/field-control.service.ts b/dmp-frontend/src/app/services/field-control.service.ts
index 6b641c193..e9a13d492 100644
--- a/dmp-frontend/src/app/services/field-control.service.ts
+++ b/dmp-frontend/src/app/services/field-control.service.ts
@@ -16,6 +16,12 @@ export class FieldControlService {
         groups.forEach(group => {
           let subgroup: any = {};
           group.groupFields.forEach(field => {
+              if(field.attributes.validation != undefined)
+                field.attributes.validation.forEach(val => {
+                    if (val.ruleStyle.toString()=="existence"){
+                        field.required = true;
+                    }
+                });
             subgroup[field.key] = field.required ? new FormControl(field.value || '', Validators.required) : new FormControl(field.value || '')
           });
           //PLEASE CHANGE THE group.key TO BE SAME AS THE ONE ON THE DYNAMIC-FORM-GROUP-COMPONENT.html