Native way to get if an input is not valid?

[gilles974]

Hello,

I’m coming from Bubble where we can get a “when input’s value isn’t valid” (for example for an email address input).

I’ve been trying multiple ways on WW to get this but I couldn’t figure it out. I’d like to dynamically display the text color of the input (red if not valid, for example not an email address). How do you do it?

Here’s one of the things I’ve tried but it won’t work.

Thanks!

[joaosander]

@gilles974

Thanks!

it should work, i don’t know why isValid is returning null, maybe a bug

After a few tests i saw that “required” and input type “email” doesnt change isValid value to true or false, it just send a little error message, maybe in future it will be changed

Also isValid is just changed after u submit the form

[gilles974]

I also tried to create a custom state with a JS

function isValidEmail(email) {
    // A basic regex pattern to validate the email format.
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

// Suppose this variable might contain quotes, etc.
const variable = context.thisInstance?.['_value'];

// If you're sure it's a string, just assign it:
// const email = variable;

// Or ensure it's a string (without adding extra quotes):
const email = String(variable);

if (isValidEmail(email)) {
    // console.log("Valid email format");
    return true;
} else {
    // console.log("Invalid email format");
    return false;
}

But it won’t render my color based on this new custom state. I really don’t know why.