Yup: I want either an email or an empty string

[miracle2k]

This has been brought up before, but I don't see a satisfactory answer: https://github.com/jquense/yup/issues/16

My incoming data can be either an empty string, or null, or undefined, or a string. I want to transform this to either an empty string or a valid email address. It's not obvious to me if this is possible in yup.

[jquense]

I'm sure it's possible but it depends a bit on what you want to do... are you only interested in transforming the string, or are you just concerned about validating that the string is empty or an email address?

[miracle2k]

The latter. I am using ep with react-formal. I have an Email Field that is supposed to be optional.
Nullable doesn't work because once the users edited the Email Field the value will at best be an empty string.
On Jul 11, 2016 2:36 PM, Jason Quense [email protected] wrote:I'm sure it's possible but it depends a bit on what you want to do... are you only interested in transforming the string, or are you just concerned about validating that the string is empty or an email address?

—You are receiving this because you authored the thread.Reply to this email directly, view it on GitHub, or mute the thread.

[jquense]

in my opinion the simplest way to handle this is in the input component, coercing an empty string back to a real "empty" value like null onChange. But if you want to handle it in yup then i might do one of these:

string().transform(value => !value ? null : value) // turn empty string to `null`

or reimplement email to handle empty strings

string().transform('email', message, value =>{
  return !value || emailRegex.test(value)
})

or lazy schema

yup.lazy(value => !value ? yup.string() : yup.string().email())

[miracle2k]

Thanks. I went with third way, because:

• The first gives me a null value, which might work, but an empty string is more correct.
• I didn't want to find out where to import or copy emailRegex from.

I still would lean towards "this should be easier/more obvious". Maybe "email()" should accept an empty string. I could, after all, write "email().required()" if I want both checks.

[jquense]

I still would lean towards "this should be easier/more obvious". Maybe "email()" should accept an empty string. I could, after all, write "email().required()" if I want both checks.

I agree with you on that. Its sort of a tough call. empty string isn't necessarily the same thing as "empty value" though we tend to treat it as such here. Right now its attempting to be consistent with the other string methods where excluding an empty string wouldn't make as much sense, such as 'min' were you _do_ want to validate the string as a string value, (not an empty one).

[auschmann]

Hi.

I am facing the same problem.
In my model i have an optional attribute rss_feed.
I want either an yup.string().url().nullable()
or null/empty string.

If i clear the text in the input and submit the form it gives an error
that rss_feed is not a valid url. Iam using yup with react-formal

Any help would be greatley appreciated.

Regards

André

[jquense]

@auschmann same advice as above, try one of those options

[jquense]

option at allow empty strings added as the default for email

[ddegroot1985]

Sorry i know this is old, i just ran into this problem and created this little method

yup.addMethod(yup.mixed, 'optional', function optional() {
return this.transform((value) => {
return !value ? undefined : value;
});
});

yup.string().optional().length(2);

[ivan-kleshnin]

Good idea but it won't play well with booleans (false -> undefined). I'd select for particular "problematic" values (empty strings, empty arrays, empty sets if you will).

Y.addMethod(Y.mixed, "optional", function optional() {
  return this.transform((value) => {
    return (
           (typeof value == "string" && !value)
        || (value instanceof Array && !value.length)
        || (value === null) // allow to skip "nullable"
    )
      ? undefined
      : value
  })
})