Validation pattern to not allow users to add strings without space separators

Question

Would anyone have an example to not allow users to add a string without spaces in between?

I'm using user's inputs to display information in a card, but if I write an input like "fsdfafsaffafsafsffgfdahf..." it ruins the UI display. I want to only allow users to input sentences with spaces in between. Is there any pattern I can use?

I'm using spans to display the input value in my card. Would this be a problem too?

See example below:

This is a wrong thing to do. Even if you require spaces, there can always be one word in a sentence that's longer than the allocated space. And what happens when you're on a smaller device? Instead, you should think about how to deal with long non-wrapping text. One common approach is to truncate the text and add ... at the end - but the actual solution is up to you. — Aleks G
– Aleks G, Commented Nov 30, 2020 at 13:22
That should be solved by css, there is usually an "show ellipsis" thing to replace text that overflows by ... on input fields. The problem to solve is just that that in my opinion. — Pac0
– Pac0, Commented Nov 30, 2020 at 13:22
Or an even better approach: stackoverflow.com/a/3247434/717214 - use word-wrap: break-word; — Aleks G
– Aleks G, Commented Nov 30, 2020 at 13:24
Does this answer your question? How do I wrap text with no whitespace inside a <td>? — Aleks G
– Aleks G, Commented Nov 30, 2020 at 13:25
thank you all! yes, I was approaching the problem incorrectly. I just modified my css class and it worked. I limit the maxlength too — Carlos Escobar
– Carlos Escobar, Commented Nov 30, 2020 at 13:36

Nicolas · Accepted Answer · 2020-11-30 13:24:33Z

2

This is not the correct way to go, because you can't really know what count as a word and what does not. For example, Would you count Donaudampfschiffahrtsgesellschaftskapitän as a word ?

The preferred way to acheive this would be to have a defined width for your container and add the word-wrap: break-word property on it.

.my-container {
  width: 100px;
  word-wrap: break-word;
  background-color: rgba(255, 0, 0, 0.5)
}

<div class="my-container">
this is a small portion of a big text
Donaudampfschiffahrtsgesellschaftskapitän
</div>

answered Nov 30, 2020 at 13:24

Nicolas

8,7364 gold badges25 silver badges58 bronze badges

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

1 Comment

Carlos Escobar Over a year ago

Thank you this fixed the problem :)!

Collectives™ on Stack Overflow

Validation pattern to not allow users to add strings without space separators

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related