How to make sure a user doesn't insert random spaces or repeated letters into a form in Angular?

Question

I am trying to insert a validation into my Angular 9 app which doesn't let a user insert loads of spaces instead of a text into a form.

Currently, I have the below code but it doesn't let for any space. I would like the user to be able to insert a space but not just all spaces as I need useful data in my database. This example is an enquiry form for my website. I have the below code with the custom empty space validator but as mentioned it doesn't let me insert any space. The aim is here to not allow users enter content such as 20 empty spaces or random repeated letters such as 'rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr'.

Here is the code snippet I have but I think it will need to be changed altogether:

import { AbstractControl, ValidationErrors } from '@angular/forms';
    export function NoWhitespaceValidator(control: AbstractControl) : ValidationErrors | null {
        if((control.value as string).indexOf(' ') >= 0) {
            return {cannotContainSpace: true}
        }
    return null;
}

Only solutions that I seem to find are just validators that don't allow a single space.

an inconspicuous semicolon · Accepted Answer · 2020-07-25 23:35:28Z

1

try

if ((control.value as string).includes(' ')  && (control.value as string).indexOf(' ') != 0) {
return {cannotContainSpace: true}
}

answered Jul 25, 2020 at 23:35

an inconspicuous semicolon

5951 gold badge5 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

an inconspicuous semicolon Over a year ago

try inside of the first if statment putting if( !(control.value as string).includes(" ")){

an inconspicuous semicolon Over a year ago

btw there is two spaces in that quote

KeenLearnerA Over a year ago

Hi, I'm trying to find a way that a space after a single word is permitted but several spaces are not permitted. At the moment it doesn't allow a single space after a single word. Hope that makes sense. So pretty much how to ensure a user does not insert blank spaces into a database through the form

an inconspicuous semicolon Over a year ago

do you mean that after the first word there can be no more spaces?

VeKri Over a year ago

This might help - stackoverflow.com/questions/21722081/…

|

Dmitry S. · Accepted Answer · 2021-04-28 08:42:27Z

0

We could even improve this RegExp for multiline validation as follows:

const pattern = new RegExp('^(?!.*([A-Za-z0-9])\1{3})(?! +$)[A-Za-z -]+$','m'); 

Validators.pattern(pattern);  //form control

edited Apr 28, 2021 at 8:42

Dmitry S.

1,6722 gold badges17 silver badges24 bronze badges

answered Apr 27, 2021 at 20:02

Denny

1

Comments

Mykola Semenov · Accepted Answer · 2021-04-28 08:54:43Z

0

As per VeKri's help, I have done this in regular expressions way and the below are my results:

Validators.pattern('^(?!.*([A-Za-z0-9])\\1{3})(?! +$)[A-Za-z -]+$')

The first part makes sure that the same characters are not repeated more than 3 times in order to avoid input such as 'ddddddddddddd', while the second part (second pair of brackets) does not allow input of solely spaces to be inserted.

It was very useful to use a regular expressions tester such as https://regex101.com/ in order to play about with the expression.

edited Apr 28, 2021 at 8:54

Mykola Semenov

8023 gold badges13 silver badges21 bronze badges

answered Jul 26, 2020 at 20:43

KeenLearnerA

1573 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to make sure a user doesn't insert random spaces or repeated letters into a form in Angular?

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related