Netlify-cms: Validation error throws no matter what when checking range length

[KyleWiteck]

Tried to add validation for a text widget to make sure that there are no more then 250 characts and no less then five. I tried using pattern: [ '/^[0-9A-Za-z]{5,250}$/', 'This field must be no more than 250 characters and no less then 5 characters', ]

but it didn't work correctly.

Here is what i have:

Screenshots

Describe the bug
Validation throwing error with regex and pattern

Expected behavior
Allows me to publish if the character length in the text widget equal to or are within the range of 5 and 250.

Applicable Versions:

• Netlify CMS version: 3.0.14
• Git provider: GitHub
• OS: Windows 10
• Browser version chrome version 73.0.3683.86]
  
• Node.JS version: v11.10.0

CMS configuration

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: 'pages'
    label: 'Pages'
    create: true
    files:
      - file: 'src/pages/index.md'
        label: 'Landing Page'
        name: 'Index Page'
        fields:
          - {
              label: 'Template Key',
              name: 'templateKey',
              widget: 'hidden',
              default: 'index-page',
            }
          - { label: Title, name: title, widget: string }
          - { label: Image, name: image, widget: image }
          - { label: Heading, name: heading, widget: string }
          - { label: Subheading, name: subheading, widget: string }
          - {
              label: About Section,
              name: aboutSection,
              widget: object,
              fields:
                [
                  { label: Title, name: title, widget: string },
                  { label: Paragraph One, name: paragraphOne, widget: text },
                  { label: Paragraph Two, name: paragraphTwo, widget: text },
                ],
            }
          - {
              label: Skills,
              name: skills,
              widget: object,
              fields:
                [
                  {
                    label: Skills,
                    name: skills,
                    widget: list,
                    fields:
                      [
                        { label: Image, name: image, widget: image },
                        { label: Title, name: title, widget: string },
                      ],
                  },
                ],
            }
          - {
              label: Featured Projects,
              name: featuredProjects,
              widget: object,
              fields:
                [
                  { label: Heading, name: heading, widget: string },
                  { label: Description, name: description, widget: text },
                  {
                    label: Projects,
                    name: projects,
                    widget: list,
                    fields:
                      [
                        { label: Image, name: image, widget: image },
                        { label: Text, name: text, widget: text },
                        { label: Git Link, name: gitLink, widget: string },
                        {
                          label: Live Link (add \"\no link\" if no link),
                          name: liveLink,
                          widget: string,
                        },
                      ],
                  },
                ],
            }
          - {
              label: Main,
              name: main,
              widget: object,
              fields:
                [
                  { label: Heading, name: heading, widget: string },
                  { label: Description, name: description, widget: text },
                ],
            }

      - file: 'src/pages/portfolio/index.md'
        label: 'Portfolio Page'
        name: 'portfolio'
        fields:
          - {
              label: 'Template Key',
              name: 'templateKey',
              widget: 'hidden',
              default: 'porftolio-page',
            }
          - { label: Title, name: title, widget: string }
          - { label: Image, name: image, widget: image }
          - { label: Heading, name: heading, widget: string }
          - { label: Description, name: description, widget: string }
          - {
              label: Intro,
              name: intro,
              widget: object,
              fields:
                [
                  { label: Heading, name: heading, widget: string },
                  { label: Description, name: description, widget: text },
                  {
                    label: Blurbs,
                    name: blurbs,
                    widget: list,
                    fields:
                      [
                        { label: Image, name: image, widget: image },
                        {
                          label: Text,
                          name: text,
                          widget: text,
                          pattern:
                            [
                              '/^[a-zA-Z]{1,250}$/',
                              'This field must be no more than 250 characters and no less then 5 characters long',
                            ],
                        },
                      ],
                  },
                ],
            }

[barthc]

@KyleWiteck could you please change your pattern from [ '/^[0-9A-Za-z]{5,250}$/', 'This field must ..] to [ '^[0-9A-Za-z]{5,250}$', 'This field must ..]

[KyleWiteck]

Unfortunately this does not solve the issue. I have tried it in many different ways and it seems to be a problem any way I try it. I am using the Gatsby starter template.

@barthc I also have tried pattern: ['^.{1,484}$', 'This field must ..'], to accept everything and it still throws my error. It throws my error no matter what.

[barthc]

@tomrutgers could you please test this pattern validation from your end using the config file just to confirm, works for me. Just omit the slashes.

[tomrutgers]

@barthc @KyleWiteck can confirm that

- { name: text, , widget: text, pattern: [ '^[0-9A-Za-z]{5,250}$', 'This field must do stuff']}

works as expected. Gives an error with a 4 letter word (and a 251 letter paragraph for that matter)

[KyleWiteck]

@barthc @tomrutgers, does it give you an error if you fall between the two? because if I give 10 letters. It still throws the error. That is the problem I seem to be having. Is that it throws the error even if I fall inline with the requirements.

If it doesn't throw the error when you fall between. What could be the problem on my end? Any ideas?

[tomrutgers]

@KyleWiteck I realize now that I didn't confirm that in my last comment, but no, it does not throw an error. Do you see any errors in your console? Also, what is the version of the CMS that's logged there? You wrote 3.0.14 in your issue, but the latest version is 2.8.0 so that can't be right..

[KyleWiteck]

@tomrutgers
"gatsby-plugin-netlify": "^2.0.6",
"gatsby-plugin-netlify-cms": "^3.0.14",
"netlify-cms": "^2.8.0",

I was looking at the wrong one. So it is 2.8.0 and I do not see any errors.

[talves]

@tomrutgers not sure it is related, but 2.8.0 breaks netlify-cms on Gatsby using the plugin (fyi)

[tomrutgers]

@talves Yeah, that's why I'm asking 👍
@KyleAMathews can you downgrade to 2.6.1 and check if it works?

[KyleWiteck]

@tomrutgers @talves I will downgrade it now and try it, maybe that is why my mark up isn't working correctly with rich-text also. I'll let you know.

[talves]

maybe just try @beta would be a better test, since 2.6.1 had an issue.

[KyleWiteck]

@tomrutgers @talves Downgrading worked!! It definitely broke things. I did not check my markdown yet, but it fixed my pattern issue. Thanks so much!

[tomrutgers]

@KyleWiteck like @talves said, you might want to try 2.8.1-beta.1 to get around those broken bits until a proper fix is in place

[KyleWiteck]

@tomrutgers I did not catch that. Ill give it a shot

[talves]

We should be releasing fixes soon.

[KyleWiteck]

@talves The beta works with the pattern. Now I will be diving into why the richtext isn't showing, only the markdown characters. If you have any thoughts, please let me know. Thanks

[tomrutgers]

@KyleWiteck Netlify CMS uses Rich Text as input and converts that to Markdown as output, making editing data for static site generators a breeze for technical and non-technical users alike. If you have any questions about that please join us on Gitter

[KyleWiteck]

@tomrutgers Thanks for providing me with the Gitter