refactorthis/xtform

AngularJS form validation extensions.

xtform's Issues

Feature suggestion: Conditional validation

Like only when you the check box is selected, the controls in the block are validated.

Custom validation support?

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.

name attribute?

inline validation doesn't work correctly with dynamic id's

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)

$validators

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.

translations

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 ?

it's 2015

who still uses jquery

bower install not working

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?

Does xtForm support radio buttons ?

Problem with the validation

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

xtForm + jasmine

test is failing.

expects $scope.xtForm.submit() in controller to exist.

how do i put xtForm there or mock it up?

Add main file to bower.json

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"

Question: summary of error messages at top of form?

Is it also possible with xt-form to group the error messages at the top of the form? Something like in the attached screenshot?

Validation of disabled fields.

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.

Check browser compatibility

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.

Add tests and refactor

• refactor into services for angular testability
• add gulp build and unit testing

CSS styles required for red borders are not documented

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

Custom strategy for validation errors on form load

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

How to use the pattern type for xtFormValidationInline

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.

Installation documentation incorrect

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

Tooltip hover behaviours

Add tooltip-trigger to the form element. This is the same as bootstrap's trigger option on the tooltip plugin.

Add code coverage for tooltip directive

Code coverage is around 60%. No tests have been created for the tooltip directive.

Depends on jQuery & Bootstrap

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?

Angular 0.3.5 breaks validations

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.

Enhancement: Need a solution to localize the built-in error messages

Is there an option for conditionally validating ?

Depending on user choices not all fields are always visible.
Is there a way to turn off validation for fields that are not visible ?

Error: 'null' is not an object (evaluating 'xtFormCtrl.validators.hasValidator')

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

Tooltips left behind

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.

xtForm and UI Bootstrap $apply already in progress

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

Tooltips does not hide when I hit browser back button

I am seeing a problem on tooltip that does not auto hide when I navigate backward.

Here is the case:

1. navigate to a page or let that be any data entry page.
2. on purpose, do not enter required fields or other validation fields.
3. hit submit button to have tooltip display validation messages
4. Hit back button on the browser and all tooltips stays.

Add Bower config

seperate tooltip element

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.

Test and document radio button & checkbox list examples for 2.0

Does not work with nested ng-form

How to make it work with nested form?

fix code for minification

please adjust directives to allow for minification
http://stackoverflow.com/questions/12927126/error-unknown-provider-aprovider-a

(workaround use in bower ngAnnotate before minification

ui-select2 validation tooltip

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