added form input validation
This commit is contained in:
parent
f2211438ce
commit
ada7880bac
93
public/dist/application.js
vendored
93
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;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.public-form input.no-border, .public-form textarea.no-border {
|
/*.public-form input.no-border.ng-invalid, .public-form textarea.no-border {
|
||||||
border: none!important;
|
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 {
|
section.content p.breakwords {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
|
@ -44,8 +44,11 @@ angular.module('forms').directive('fieldDirective', ['$http', '$compile', '$root
|
||||||
required: '&',
|
required: '&',
|
||||||
design: '=',
|
design: '=',
|
||||||
index: '=',
|
index: '=',
|
||||||
|
forms: '='
|
||||||
},
|
},
|
||||||
link: function(scope, element) {
|
link: function(scope, element) {
|
||||||
|
console.log(scope.forms.myForm);
|
||||||
|
|
||||||
scope.setActiveField = $rootScope.setActiveField;
|
scope.setActiveField = $rootScope.setActiveField;
|
||||||
|
|
||||||
//Set format only if field is a date
|
//Set format only if field is a date
|
||||||
|
@ -55,7 +58,7 @@ angular.module('forms').directive('fieldDirective', ['$http', '$compile', '$root
|
||||||
changeMonth: true,
|
changeMonth: true,
|
||||||
altFormat: 'mm/dd/yyyy',
|
altFormat: 'mm/dd/yyyy',
|
||||||
yearRange: '1900:-0',
|
yearRange: '1900:-0',
|
||||||
defaultDate: 0,
|
defaultDate: 0
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -83,6 +86,6 @@ angular.module('forms').directive('fieldDirective', ['$http', '$compile', '$root
|
||||||
var template = getTemplateUrl(fieldType);
|
var template = getTemplateUrl(fieldType);
|
||||||
element.html(template).show();
|
element.html(template).show();
|
||||||
$compile(element.contents())(scope);
|
$compile(element.contents())(scope);
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
}]);
|
}]);
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<h3>
|
<h3>
|
||||||
<span class="fa fa-angle-double-right"></span>
|
<span class="fa fa-angle-double-right"></span>
|
||||||
{{field.title}}
|
{{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>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 field-input">
|
<div class="col-xs-12 field-input">
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<h3>
|
<h3>
|
||||||
<span class="fa fa-angle-double-right"></span>
|
<span class="fa fa-angle-double-right"></span>
|
||||||
{{field.title}}
|
{{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>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 field-input ">
|
<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="field row radio legal" ng-click="setActiveField(field._id, index, true)">
|
||||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
|
<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>
|
<br>
|
||||||
<p style="color:#ddd;">{{field.description}}</p>
|
<p style="color:#ddd;">{{field.description}}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="field row textfield natural" ng-click="setActiveField(field._id, index, true)">
|
<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">
|
<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"
|
<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"
|
class="text-field-input"
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="field row" ng-click="setActiveField(field._id, index, true)">
|
<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">
|
<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">
|
<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>
|
</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="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 class="col-xs-12 field-input">
|
||||||
<div ng-repeat="option in field.fieldOptions" class="row-fluid">
|
<div ng-repeat="option in field.fieldOptions" class="row-fluid">
|
||||||
<label class="btn col-xs-4"
|
<label class="btn col-xs-4"
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<h3>
|
<h3>
|
||||||
<span class="fa fa-angle-double-right"></span>
|
<span class="fa fa-angle-double-right"></span>
|
||||||
{{field.title}}
|
{{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>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 field-input">
|
<div class="col-xs-12 field-input">
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="field row" ng-click="setActiveField(field._id, index, true)">
|
<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">
|
<div class="col-xs-12 field-input">
|
||||||
<textarea class="textarea" type="text"
|
<textarea class="textarea" type="text"
|
||||||
ng-model="field.fieldValue"
|
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}">
|
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}" ng-style="{'color': design.colors.questionColor}">
|
||||||
<h3>
|
<h3>
|
||||||
<span class="fa fa-angle-double-right"></span> {{field.title}}
|
<span class="fa fa-angle-double-right"></span> {{field.title}}
|
||||||
<span class="required-error" ng-show="field.required && !field.fieldValue">
|
<span class="required-error" ng-show="!field.required">
|
||||||
*(required)
|
(optional)
|
||||||
</span>
|
</span>
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
@ -24,10 +24,12 @@
|
||||||
on-enter-key="nextField()">
|
on-enter-key="nextField()">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12">
|
<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="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
|
||||||
<span class="sr-only">Error:</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -51,7 +51,7 @@ data-index="{{$index}}"
|
||||||
data-id="{{field._id}}"
|
data-id="{{field._id}}"
|
||||||
ng-class="{activeField: selected._id == field._id }"
|
ng-class="{activeField: selected._id == field._id }"
|
||||||
class="row field-directive">
|
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>
|
</field-directive>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</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)"
|
<button ng-focus="setActiveField('submit_field', myform.form_fields.length)"
|
||||||
class="Button btn col-sm-2 col-xs-4"
|
class="Button btn col-sm-2 col-xs-4"
|
||||||
v-busy="loading" v-busy-label="Please wait" v-pressable
|
v-busy="loading" v-busy-label="Please wait" v-pressable
|
||||||
ng-disabled="loading"
|
ng-disabled="loading || forms.myForm.$invalid"
|
||||||
ng-click="submitForm()"
|
ng-click="submitForm()"
|
||||||
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
|
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
|
||||||
style="font-size: 1.6em; margin-left: 1em; margin-top: 1em;">
|
style="font-size: 1.6em; margin-left: 1em; margin-top: 1em;">
|
||||||
|
|
Loading…
Reference in a new issue