refactorthis / xtform Goto Github PK
View Code? Open in Web Editor NEWAngularJS form validation extensions.
Home Page: http://refactorthis.github.io/xtform/
License: MIT License
AngularJS form validation extensions.
Home Page: http://refactorthis.github.io/xtform/
License: MIT License
Code coverage is around 60%. No tests have been created for the tooltip directive.
I am having issues with a custom strategy which i want to show any validation errors whenever the page is loaded. The page loads an async data source to populate the fields. I am assuming I need to wait for that data source to load and then return the validation results...but not sure how to wire that in. We are using $rootScope.$broadcast(); to send an event when the data is loaded...but not sure if that can be accessed via the config. I don't really see a form.$loaded event to look at either.
myapp.config(function (xtFormConfigProvider) {
xtFormConfigProvider.addValidationStrategy('customStrategy', function (form, ngModel) {
return ngModel.$invalid;
});
});
With the strategy as is, the tooltips work sometimes, but sometimes they load unexpectedly. Sometimes, if there is an error initially, the tooltip will appear in the upper left corner. Other times, tooltips will appear initially on the proper element, but a valid element might have its tooltip visible too.
Also, if there are tooltips visible and you change tabs...those tooltips stay visible and there is no way to hide them. (This might be another issue)
I am using focus-error= true and that custom stragety.
Using angular ui and jade if that matters.
Thanks,
Dan
When destroy method is called it ends up with the above error. Here is the relevant code (line:289):
element.on('$destroy', function() {
if (xtFormCtrl.validators.hasValidator(attrs.name)) {
xtFormCtrl.validators.deregisterValidator(attrs.name);
}
});
Hi,
When using ui-seelct2 the actual input against which you apply the xt-validate attribute becomes hidden due to this CSS
.select2-offscreen, .select2-offscreen:focus {
clip: rect(0 0 0 0) !important;
width: 1px !important;
height: 1px !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: absolute !important;
outline: 0 !important;
left: 0px !important;
top: 0px !important;
}
therefore the validation tooltip ends up in the top left hand corner of the screen which isn't all that helpful :-)
So here you see that week commencing is requried but the tooltip is in the upper left hand corner
How to make it work with nested form?
The documentation here says to install via bower with this command:
bower install --save angular-xtform
...but I'm pretty sure it should be...
bower install --save xtform
Ensure browser compatibility and angular version compatibility.
Before 2.0 release xtform should support IE9+ and angular js >=1.2.x.
Determine how hard it is to support IE8 and create a separate story for this if possible.
jQuery is needed as a dependency for xtform. Go through the code and update map/filter usage with jQuery to ensure old browser support.
Good day,
Can you provide documentation on how to use the Pattern type in your xtForm inline validation? Everything is working so far except pattern. Is it supposed to support RegEx? Thanks for your reply.
This is a nice new feature.
But this does not place a red border round the element.
Is it possible to add a class like "xt-error" to the element indicated for the seperate tooltip.
So: xt-validation-tooltip="groupSelector"
would result in a class on the element groupSelector that indicates that it is in error and some css can be added.
Depending on user choices not all fields are always visible.
Is there a way to turn off validation for fields that are not visible ?
The new override possibility for the error messages is nice, but enough for me as I need to make my site multi-lingual.
For the multi-lingual support we use angular-gettext.
In the previous version of xtForm I hacked the call to getText in the code and now I tried it with the new override functionality. This does not seem to work. I get an injection error when I try to use the getText command in the xtFormConfigProvider.
In the old version I used: var errString = this.gettextCatalog.getString(key);
In the function showErrors where the key is the property being validated.
I assume more people have a use for this option, so could this be included where you set it in the config which option you want to use ?
Add tooltip-trigger to the form element. This is the same as bootstrap's trigger option on the tooltip plugin.
The css that provides the red border in 2.0 has moved to another class.
But this class is not provided in the distribution package.
Therefore out of the box there is no red border.
Adding a css-file with the following content will do the trick:
input.ng-dirty.ng-invalid,
select.ng-dirty.ng-invalid,
textarea.ng-dirty.ng-invalid {
border: 1px solid red;
}
.ng-submitted input.ng-invalid,
.ng-submitted select.ng-invalid,
.ng-submitted textarea.ng-invalid {
border: 1px solid red;
}
Ran into an issue and traced it back to jQLite not having jQuery's element.is
function. Might either want to make it jQuery-free, or add the dependency to bower?
please adjust directives to allow for minification
http://stackoverflow.com/questions/12927126/error-unknown-provider-aprovider-a
(workaround use in bower ngAnnotate before minification
I am seeing a problem on tooltip that does not auto hide when I navigate backward.
Here is the case:
As I understand it as from Angular 1.3 form validation is supposed to be done with the new $validators.
This is a special pipeline introduced for handling validations.
As xtForm 2.0 was rewritten for Angular 1.3 I expected this to be used but I do not see it in the source.
I am interested why this structure was not used in xtForm, as it works fine for me in my other directives.
I use BowerMain and it's not getting the main file, so I'd like to add the main file to bower.json:
"main": "dist/xtForm.min.js"
I did a test where a validated field is disabled based on the value of another field.
In my test the disabled field was still validated which is not desirable.
Did I do something wrong ?
Otherwise I would like to suggest this as a new functionality: Don't validate a field when it is disabled.
There is a problem, I use the tooltip validation on a modal, after i submit the data and it is accepted i hide the modal, problem is tooltips are left behind for every field.
I try the xtform and find it very helpful.
But, does the latest version support custom validation?
I found the old example page having example on custom validation,
http://www.brentmckendrick.com/code/xtform/
Many thx.
who still uses jquery
Like only when you the check box is selected, the controls in the block are validated.
Hi dear,
i try yo install via bower :
bower install --save angular-xtform
but it shown me
bower ENOTFOUND Package angular-xtform not found
what is should to do?
When you try to run UI bootstrap popup datepicker (https://angular-ui.github.io/bootstrap/) inside xtForm form it will result in the following error:
Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.3.15/$rootScope/inprog?p0=%24apply
at REGEX_STRING_REGEXP (angular.js:63)
at beginPhase (angular.js:14820)
at Scope.$get.Scope.$apply (angular.js:14564)
at HTMLInputElement. (xtForm.tpl.js:58)
at HTMLInputElement.jQuery.event.dispatch (jquery.js:4435)
at HTMLInputElement.jQuery.event.add.elemData.handle (jquery.js:4121)
at Scope.link.scope.dateSelection (ui-bootstrap-tpls.js:1632)
at $parseFunctionCall (angular.js:12404)
at Scope.$get.Scope.$eval (angular.js:14466)
at angular.js:20672
Hi
I have a problem with the library (version 1.0.1)
For example, in a input text field, when, at the first time i write a sentence and then i delete it, it shows correctly the error, but then i write again a sentence, delete it (shows the error), and i write again but now never hides the error
<div class="col-md-3">
<div class="form-group">
<label once-text="'Name'|translate"></label><span class="red-dot"> *</span>
<textarea msd-elastic name="nom" id="nom" class="form-control" style="height:34px;" ng-model="params.expExp.nom"
xt-validate container=".modal-body" msg-required="{{'This field is required'|translate}}" required>
</textarea>
</div>
</div>
angularjs 1.3.18
bootstrap 3.2.0
angular ui 0.13.4
test is failing.
expects $scope.xtForm.submit() in controller to exist.
how do i put xtForm there or mock it up?
I have been using your library with much pleasure.
It works fine for me up til Angular 0.3.0.
But last friday I updated to 0.3.5 and I get a lot of red borders in situations when the field is no longer invalid.
So for the moment I reverted to 0.3.0, but I hope you can fix this because xtForm is a really nice extention.
I have an Angular application that dynamically generates a list op input fields and dynamically assigns id's.
Inline validation doesn't work as expected when referencing those input fields with their dynamic id's.
I made a Plunk that reproduces the problem: http://plnkr.co/edit/5vDGBy?p=preview
Any idea how to make this work?
Ps: I'm using the latest version (2.0.0 beta)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.