beenull/tellform
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

added form input validation

Browse source
This commit is contained in:
David Baldwynn 2016-04-28 20:45:00 -07:00
parent f2211438ce
commit ada7880bac
15 changed files with 135 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

191
public/dist/application.js vendored
View file

File diff suppressed because one or more lines are too long

2
public/dist/application.min.css vendored
View file

File diff suppressed because one or more lines are too long

6
public/dist/application.min.js vendored
View file

File diff suppressed because one or more lines are too long

16
public/modules/forms/css/form.css
View file

@ -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;
} }

17
public/modules/forms/directives/field.client.directive.js
View file

@ -10,7 +10,7 @@ var __indexOf = [].indexOf || function(item) {
angular.module('forms').directive('fieldDirective', ['$http', '$compile', '$rootScope', '$templateCache', angular.module('forms').directive('fieldDirective', ['$http', '$compile', '$rootScope', '$templateCache',
function($http, $compile, $rootScope, $templateCache) { function($http, $compile, $rootScope, $templateCache) {
var getTemplateUrl = function(fieldType) { var getTemplateUrl = function(fieldType) {
var type = fieldType; var type = fieldType;
var templateUrl = 'modules/forms/views/directiveViews/field/'; var templateUrl = 'modules/forms/views/directiveViews/field/';
@ -44,23 +44,26 @@ 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
if(scope.field.fieldType === 'date'){ if(scope.field.fieldType === 'date'){
scope.dateOptions = { scope.dateOptions = {
changeYear: true, changeYear: true,
changeMonth: true, changeMonth: true,
altFormat: 'mm/dd/yyyy', altFormat: 'mm/dd/yyyy',
yearRange: '1900:-0', yearRange: '1900:-0',
defaultDate: 0, defaultDate: 0
}; };
} }
var fieldType = scope.field.fieldType; var fieldType = scope.field.fieldType;
if(scope.field.fieldType === 'number' || scope.field.fieldType === 'textfield' || scope.field.fieldType === 'email' || scope.field.fieldType === 'link'){ if(scope.field.fieldType === 'number' || scope.field.fieldType === 'textfield' || scope.field.fieldType === 'email' || scope.field.fieldType === 'link'){
switch(scope.field.fieldType){ switch(scope.field.fieldType){
case 'textfield': case 'textfield':
@ -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);
}, }
}; };
}]); }]);

2
public/modules/forms/views/directiveViews/field/date.html
View file

@ -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">

2
public/modules/forms/views/directiveViews/field/dropdown.html
View file

@ -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 ">

2
public/modules/forms/views/directiveViews/field/legal.html
View file

@ -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>

2
public/modules/forms/views/directiveViews/field/natural.html
View file

@ -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"

2
public/modules/forms/views/directiveViews/field/password.html
View file

@ -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>

2
public/modules/forms/views/directiveViews/field/radio.html
View file

@ -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"

2
public/modules/forms/views/directiveViews/field/rating.html
View file

@ -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">

2
public/modules/forms/views/directiveViews/field/textarea.html
View file

@ -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"

10
public/modules/forms/views/directiveViews/field/textfield.html
View file

@ -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>

4
public/modules/forms/views/directiveViews/form/submit-form.client.view.html
View file

@ -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;">