added form input validation
This commit is contained in:
parent
f2211438ce
commit
ada7880bac
191
public/dist/application.js
vendored
191
public/dist/application.js
vendored
File diff suppressed because one or more lines are too long
2
public/dist/application.min.css
vendored
2
public/dist/application.min.css
vendored
File diff suppressed because one or more lines are too long
6
public/dist/application.min.js
vendored
6
public/dist/application.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -40,9 +40,21 @@
|
|||
outline: none;
|
||||
}
|
||||
|
||||
.public-form input.no-border, .public-form textarea.no-border {
|
||||
border: none!important;
|
||||
/*.public-form input.no-border.ng-invalid, .public-form textarea.no-border {
|
||||
border-color: none;
|
||||
}*/
|
||||
.public-form input.ng-valid, .public-form textarea.ng-valid {
|
||||
border-color: #20FF20!important;
|
||||
border-style: solid!important;
|
||||
border-width: 3px!important;
|
||||
}
|
||||
|
||||
.public-form input.ng-invalid.ng-dirty, .public-form textarea.ng-invalid.ng-dirty {
|
||||
border-color: #FA787E!important;
|
||||
border-style: solid!important;
|
||||
border-width: 3px!important;
|
||||
}
|
||||
|
||||
section.content p.breakwords {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@ var __indexOf = [].indexOf || function(item) {
|
|||
|
||||
angular.module('forms').directive('fieldDirective', ['$http', '$compile', '$rootScope', '$templateCache',
|
||||
function($http, $compile, $rootScope, $templateCache) {
|
||||
|
||||
|
||||
var getTemplateUrl = function(fieldType) {
|
||||
var type = fieldType;
|
||||
var templateUrl = 'modules/forms/views/directiveViews/field/';
|
||||
|
@ -44,23 +44,26 @@ angular.module('forms').directive('fieldDirective', ['$http', '$compile', '$root
|
|||
required: '&',
|
||||
design: '=',
|
||||
index: '=',
|
||||
forms: '='
|
||||
},
|
||||
link: function(scope, element) {
|
||||
console.log(scope.forms.myForm);
|
||||
|
||||
scope.setActiveField = $rootScope.setActiveField;
|
||||
|
||||
|
||||
//Set format only if field is a date
|
||||
if(scope.field.fieldType === 'date'){
|
||||
scope.dateOptions = {
|
||||
changeYear: true,
|
||||
changeMonth: true,
|
||||
altFormat: 'mm/dd/yyyy',
|
||||
yearRange: '1900:-0',
|
||||
defaultDate: 0,
|
||||
yearRange: '1900:-0',
|
||||
defaultDate: 0
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
var fieldType = scope.field.fieldType;
|
||||
|
||||
|
||||
if(scope.field.fieldType === 'number' || scope.field.fieldType === 'textfield' || scope.field.fieldType === 'email' || scope.field.fieldType === 'link'){
|
||||
switch(scope.field.fieldType){
|
||||
case 'textfield':
|
||||
|
@ -83,6 +86,6 @@ angular.module('forms').directive('fieldDirective', ['$http', '$compile', '$root
|
|||
var template = getTemplateUrl(fieldType);
|
||||
element.html(template).show();
|
||||
$compile(element.contents())(scope);
|
||||
},
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<h3>
|
||||
<span class="fa fa-angle-double-right"></span>
|
||||
{{field.title}}
|
||||
<span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span>
|
||||
<span class="required-error" ng-show="!field.required && !field.fieldValue">optional</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="col-xs-12 field-input">
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<h3>
|
||||
<span class="fa fa-angle-double-right"></span>
|
||||
{{field.title}}
|
||||
<span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span>
|
||||
<span class="required-error" ng-show="!field.required">optional</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="col-xs-12 field-input ">
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<div class="field row radio legal" ng-click="setActiveField(field._id, index, true)">
|
||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
|
||||
<h3>{{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3>
|
||||
<h3>{{field.title}} <span class="required-error" ng-show="!field.required">optional</span></h3>
|
||||
<br>
|
||||
<p style="color:#ddd;">{{field.description}}</p>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div class="field row textfield natural" ng-click="setActiveField(field._id, index, true)">
|
||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
|
||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="!field.required">optional</span></h3></div>
|
||||
<div class="col-xs-12 field-input">
|
||||
<input ng-focus="setActiveField(field._id, index, true)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="text"
|
||||
class="text-field-input"
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div class="field row" ng-click="setActiveField(field._id, index, true)">
|
||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
|
||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="!field.required">optional</span></h3></div>
|
||||
<div class="col-xs-12 field-input">
|
||||
<input ng-focus="setActiveField(field._id, index, true)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="password" class="text-field-input" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled">
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div class="field row radio" ng-click="setActiveField(field._id, index, true)" ng-if="field.fieldOptions.length > 0">
|
||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
|
||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="!field.required">optional</span></h3></div>
|
||||
<div class="col-xs-12 field-input">
|
||||
<div ng-repeat="option in field.fieldOptions" class="row-fluid">
|
||||
<label class="btn col-xs-4"
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<h3>
|
||||
<span class="fa fa-angle-double-right"></span>
|
||||
{{field.title}}
|
||||
<span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span>
|
||||
<span class="required-error" ng-show="!field.required">optional</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="col-xs-12 field-input">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div class="field row" ng-click="setActiveField(field._id, index, true)">
|
||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
|
||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="!field.required">optional</span></h3></div>
|
||||
<div class="col-xs-12 field-input">
|
||||
<textarea class="textarea" type="text"
|
||||
ng-model="field.fieldValue"
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}" ng-style="{'color': design.colors.questionColor}">
|
||||
<h3>
|
||||
<span class="fa fa-angle-double-right"></span> {{field.title}}
|
||||
<span class="required-error" ng-show="field.required && !field.fieldValue">
|
||||
*(required)
|
||||
<span class="required-error" ng-show="!field.required">
|
||||
(optional)
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
@ -24,10 +24,12 @@
|
|||
on-enter-key="nextField()">
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<div ng-show="forms.myForm.{{field.fieldType}}{{index}}.$invalid" class="alert alert-danger" role="alert">
|
||||
<div ng-show="forms.myForm.{{field.fieldType}}{{index}}.$invalid && !!forms.myForm.{{field.fieldType}}{{index}}.$viewValue " class="alert alert-danger" role="alert">
|
||||
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
|
||||
<span class="sr-only">Error:</span>
|
||||
Enter a valid email address
|
||||
<span ng-if="field.fieldType == 'email'"> Please enter a valid email address </span>
|
||||
<span ng-if="field.fieldType == 'numbers'"> Please enter valid numbers only </span>
|
||||
<span ng-if="field.fieldType == 'link'"> Please a valid url </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -51,7 +51,7 @@ data-index="{{$index}}"
|
|||
data-id="{{field._id}}"
|
||||
ng-class="{activeField: selected._id == field._id }"
|
||||
class="row field-directive">
|
||||
<field-directive field="field" design="myform.design" index="$index">
|
||||
<field-directive field="field" design="myform.design" index="$index" forms="forms">
|
||||
</field-directive>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -66,7 +66,7 @@ style="border-top: 1px solid #ddd; margin-right: -13% ;margin-left: -13%; paddin
|
|||
<button ng-focus="setActiveField('submit_field', myform.form_fields.length)"
|
||||
class="Button btn col-sm-2 col-xs-4"
|
||||
v-busy="loading" v-busy-label="Please wait" v-pressable
|
||||
ng-disabled="loading"
|
||||
ng-disabled="loading || forms.myForm.$invalid"
|
||||
ng-click="submitForm()"
|
||||
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
|
||||
style="font-size: 1.6em; margin-left: 1em; margin-top: 1em;">
|
||||
|
|
Loading…
Reference in a new issue