#333 feature - Added form validation in catalog page

Roberto Sánchez

2013-12-30 86a407cd3fcbefb16b00ea9ef10bd80f2b0e0a0f

 securis/src/main/resources/static/admin.html
..
..
@@ -36,8 +36,18 @@
36
36
   opacity: 0;
37
37
 }
38
38
 
39
-input.ng-invalid-maxlength {
39
+input.ng-invalid, textarea.ng-invalid {
40
40
 	border: solid 1px red;
41
+}
42
+
43
+input.ng-dirty.ng-valid, textarea.ng-dirty.ng-valid {
44
+	border: solid 1px green;
45
+}
46
+
47
+.alert.inline-alert {
48
+	padding-top: 5px;
49
+	padding-bottom: 5px;
50
+	margin-bottom: 5px;
41
51
 }
42
52
 
43
53
 </style>
..
..
@@ -111,20 +121,28 @@
111
121
 					</div>
112
122
 				</nav>
113
123
 				<div class="panel panel-default animate-show ng-hide" ng-show="showForm">
114
-					<form role="form" class="form-horizontal " name="licenseForm">
124
+					<form role="form" class="form-horizontal " name="catalogForm" id="catalogForm" ng-submit="saveCatalog()" >
125
+					<pre>Form: {{catalogForm | json}}</pre>
126
+					<pre>formu: {{formu | json}}</pre>
115
127
 						<div class="form-group" ng-repeat="field in catalogMetadata.fields" ng-if="!isNew || !field.readOnly">
116
128
 							<label class="col-md-3 control-label" for="{{field.name}}">{{field.display}}</label>
117
129
 							<div class="col-md-5">
118
-								<input ng-if="!field.readOnly && !field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
119
-									class="form-control" ng-model="formu[field.name]" ng-required="field.mandatory" ng-maxlength="20" />
120
-								<textarea ng-if="!field.readOnly && field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
121
-									class="form-control" ng-model="formu[field.name]" rows="{{field.multiline}}" ng-required="field.mandatory" ng-maxlength="field.maxlength" ></textarea>
130
+								<input catalog-field ng-if="!field.readOnly && !field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
131
+									class="form-control" ng-model="formu[field.name]" ng-required="field.mandatory" ng-maxlength="{{field.maxlength}}" />
132
+								<textarea catalog-field ng-if="!field.readOnly && field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
133
+									class="form-control" ng-model="formu[field.name]" rows="{{field.multiline}}" ng-required="field.mandatory" ng-maxlength="{{field.maxlength}}"></textarea>
122
134
 								<p ng-if="field.readOnly" class="form-control-static">{{formu[field.name]}}</p>
135
+								
136
+								<div class="alert inline-alert alert-warning" ng-show="catalogForm[field.name].$invalid">
137
+								    <span class="glyphicon glyphicon-warning-sign"></span>
138
+								    <span ng-show="catalogForm[field.name].$error.maxlength">{{field.display}} length is too long (max: {{field.maxlength}}).<br/></span>
139
+								    <span ng-show="catalogForm[field.name].$error.required">{{field.display}} is required.</span>
140
+								</div>
123
141
 							</div>
124
142
 						</div>
125
143
 						<div class="form-group">
126
-							<div class="col-md-offset-3 col-md-10">
127
-								<button type="submit" class="btn btn-primary">
144
+							<div class="col-md-offset-3 col-md-10" id="saveContainer">
145
+								<button id="save" type="submit" class="btn btn-primary" >
128
146
 									<span class="glyphicon glyphicon-floppy-disk"></span> Save
129
147
 								</button>
130
148
 							</div>