How to enforce first letter is capitalized for input field?

I have an input field and I want the first letter of the first word to be capitalized. (Not the other words).

How do I do this?

Example “hello there friends” becomes “Hello there friends”

I am aware of the CAPITALIZE formula but it seems to be for all the words and not just the first word?

If you are looking to add browser validation for the input you can add this to the input:
image

If you want to validate the input inside a workflow you can add this javascript:

const value = // variable in weweb
const isValid = !!value.match(/^\p{Lu}/u)
return isValid

If you want to transform the string:

const value = // variable in weweb
const modified = value.charAt(0).toUpperCase() + value.slice(1);

this is the kind of problem that you can easily solve by googling how to do it in js, or directly by asking GPT with copilot inside weweb

Hey Dorilama, thanks! Appreciate your help because i know zero code but am learning about all of these now! Didn’t know what an array or object or string or any of those is until 2 weeks ago hahaha

What I actually want to do is to transform the string. So I tried putting in the code you included, but it isnt returning the transformed string?

It seems to be succeeding but the output is “undefined” (action 3 result)…

You need to return the modified variable at the end of the snippet :wink:

Indeed, WeWeb’s JS actions are in fact functions that need to return a result

As Quentin said, you need to return something of you want it available in the next action.
Just add return modified.

Hey dorilama! I tried this:

But it doesn’t work? Nothing happens and everything is still small letters. Wanted to use this instead of the workflow option as it’s easier to use and doesn’t require a separate workflow :slight_smile:

If you dont need to store it as a capitalized sentence, you could check out this css modifier

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).

p::first-letter {
 text-transform: uppercase;
}

depending on your use case, it may be more functional to save/modify the users input vs using CSS to only show the text as capitalized.

Oh! I do need to store the user’s input with capital letters for the first word though, it’s their name :slight_smile:

In that case. When you initially save the string, you should capitalize the first letter in the workflow that saves the text. You can use CSS to control the visual aspect of the text in the input.

the pattern attribute does not change the value of the input. It can only trigger client side validation (show default browser hints and messages and making the input not valid). The user can still input anything, it only sees the default invalid message.
If you want to actually correct the value, or have more control over the validation you need to use workflows.

1 Like