Default text input validator shows validation error on text

Topic: Default text input validator shows validation error on text with whitespaces

Arsenii pro asked 6 years ago

That is. Code and produced result on picture attached. Despite having no whitespaces in input can be important for some input types, it breask a lot of use cases. https://ibb.co/h9rDHd

Damian Gemza staff commented 6 years ago

Dear Arsenii, Thanks for your report. We'll fix this. But please notice, that you're able to pass your custom RegEx with your validation. Here you can read more about this: https://mdbootstrap.com/angular/forms/input-validation/#mdbCustomRegex Best Regards, Damian

Arsenii pro commented 6 years ago

Dear Damian, Thank you for the reply. I have the next question: if I have rather complex regex like titleRegEx = "^[a-zA-Z0-9]+[-%&a-zA-Z0-9 ]*[%a-zA-Z0-9]+$" which I don't want to copy into any input field I have, what is solution to do it other than creating my custom component for input since customRegex="" accepts only pure text and not variables? Best Regards, Arsenii

Damian Gemza staff commented 6 years ago

Dear Arsenii, I don't know if it's possible. The best way is to provide your custom RegEx in customRegex field. Best Regards, Damian

Add comment

chakkit pro answered 6 years ago

0 0 Best answer

I've got problem too.
I copied partial code from ng-uikit-pro-standard.es5.js which may cause the issue.
Here is the code: 
==== 
else if (!this.customRegex) { 
if (this.el.nativeElement.length === 0) { 
this.renderer.removeClass(this.el.nativeElement, 'counter-danger'); 
this.renderer.removeClass(this.el.nativeElement, 'counter-success'); 
// tslint:disable-next-line:max-line-length 
} 
else if (this.el.nativeElement.value.match(/^[a-zA-Z0-9]+$/g) && this.el.nativeElement.value.length >= this.minLength && this.el.nativeElement.value.length <= this.maxLength) { 
this.renderer.removeClass(this.el.nativeElement, 'counter-danger'); 
this.renderer.addClass(this.el.nativeElement, 'counter-success'); 
// tslint:disable-next-line:max-line-length 
} 
else if (!this.el.nativeElement.value.match(/^[a-zA-Z0-9]+$/g) || this.el.nativeElement.value.length this.maxLength) { 
this.renderer.addClass(this.el.nativeElement, 'counter-danger'); 
this.renderer.removeClass(this.el.nativeElement, 'counter-success'); 
} 
} 
====
Notice at "(/^[a-zA-Z0-9]+$/g)", it seems checking only alphanumeric which is not included any special chats as well as non-English chars.
Please skip checking this or change it to .*+ or something equivalent.
Again, this is a text field, it should accepts any chars by default and only checking min-max things.
Thanks,

Please insert min. 20 characters.

I've got problem too.

I copied partial code from ng-uikit-pro-standard.es5.js which may cause the issue.

Here is the code:
====
else if (!this.customRegex) {
if (this.el.nativeElement.length === 0) {
this.renderer.removeClass(this.el.nativeElement, 'counter-danger');
this.renderer.removeClass(this.el.nativeElement, 'counter-success');
// tslint:disable-next-line:max-line-length
}
else if (this.el.nativeElement.value.match(/^[a-zA-Z0-9]+$/g) && this.el.nativeElement.value.length >= this.minLength && this.el.nativeElement.value.length <= this.maxLength) {
this.renderer.removeClass(this.el.nativeElement, 'counter-danger');
this.renderer.addClass(this.el.nativeElement, 'counter-success');
// tslint:disable-next-line:max-line-length
}
else if (!this.el.nativeElement.value.match(/^[a-zA-Z0-9]+$/g) || this.el.nativeElement.value.length this.maxLength) {
this.renderer.addClass(this.el.nativeElement, 'counter-danger');
this.renderer.removeClass(this.el.nativeElement, 'counter-success');
}
}
====

Notice at "(/^[a-zA-Z0-9]+$/g)", it seems checking only alphanumeric which is not included any special chats as well as non-English chars.

Please skip checking this or change it to .*+ or something equivalent.

Again, this is a text field, it should accepts any chars by default and only checking min-max things.

Thanks,

Damian Gemza staff commented 6 years ago

Dear chakkit, In 6.1.3 relese we rebuild validation functions. This problem won't exist in new version of MDB Angular. If you want to use it, please install MDB Angular from our GitLab repo on branch dev: https://git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard Best Regards, Damian

chakkit pro commented 6 years ago

Hi Damian, I've updated to #dev and still got problem. I notice you changed the regex to (/^[a-zA-Z0-9!@#$%^&*:;)(+=._-s]+$/g) which is still restricted for non English chars. Why you want to restrict it? It does not make any sense at all. I mean "text", how come you guys think it should be English letters only? Think if you want to write a blog in native language. Oh, about blogging I think of the emoji as well, I did not test this but looks like they will be restricted too. If we need something specific we can add the customRegex i.e. username, domain name, etc. So, please change the regex to accept any char. Thanks,

Please insert min. 15 characters.

Damian Gemza staff commented 6 years ago

Dear chakkit, In 6.1.3 we've removed those regex validations from our code, so your text input is validating through Angular Validations. Please show me the code with (/^[a-zA-Z0-9!@#$%^&*:;)(+=._-s]+$/g) in mdbInputDirective validation, because maybe we've missed something. Best Regards, Damian

chakkit pro commented 6 years ago

Hi Damian, I found the code at line 14736 of this file: node_modules/ng-uikit-pro-standard/esm5/ng-uikit-pro-standard.es5.js I did not scan all your code so not sure what exactly files the angular used. When I modified by removing the regex part of this file and it just works. Thanks,

Damian Gemza staff commented 6 years ago

As I said before, in 6.1.3 this problem shouldn't exist. Best Regards, Damian

chakkit pro commented 6 years ago

I just update it once again and see no regex code currently. Will test the real app later. Thanks,

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Arsenii

Pro User 69Support score
16Questions 5Answers 0Snippets