​

👋

Do you know Jack over at Webflail? Jack helped us a lot in getting Slater off the ground. In those early days, he repeatedly emphasized the need for a community library. Well, today (finally!), we are announcing a community library! Shout out to Jack! :) With the launch, we have included JavaScript snippets from Corey Moen, Digipop, Jeff McAvoy, and yours truly.

You can watch a demo of the community library here.

​

​

Or you can check it out yourself: https://slater.app/community_library.

Do you have useful scripts? Add them to your personal library and send us an email. We'd love to include them.

​

Javascript 101: rrrrregex

Regex or Regular expression is a powerful tool that allows you to search, validate, and manipulate text based on patterns. Regex is widely used in various programming languages and is particularly useful for tasks like form validation. (Before AI, using Regex was an absolute nightmare but with AI assistance, 😍.) In this 101, let's focus on using regex to validate a user's email address.

Need to validate phone numbers, websites or LinkedIn Urls? Check out the Community Library.

What are Regular Expressions? A regular expression is a sequence of characters that defines a search pattern. This pattern can be used to match, locate, or manage text. Regex is language-agnostic, meaning you can use similar patterns in JavaScript or most other languages.

Let's examine a JavaScript function (also found in the community library) that uses regex to validate email addresses:

function validEmail(email) {
  const re =
    /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

  return re.test(email);
}

Want to know what the Regex does? I'll translate a bit to get a sense of how Regex works but we won't be exhaustive:

1. ^: Asserts the start of the string.
2. ([^<>()[\]\.,;:\s@quot;]+(\.[^<>()[\]\.,;:\s@quot;]+)*): Matches the username part of the email.
3. |: Or operator.
4. The username can also be: quot;.+quot;: Anything inside double quotes (for emails with spaces or special chars).
5. ...

🤯 Had enough? Use Slater AI to write your Regex.

Here's how you might use this in a web form:

function validEmail(email) {
  const re =
    /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

  return re.test(email);
}

$("#email-el").on("blur", function () {
  let email = $(this).val()

  if (!validEmail(email)) {
    // This email is invalid. Throw an error.
  }
})

If you add this to a form, you can run the following tests email and see how the regex responds:

1. ​user@example.com ✅
2. invalid-email ❌
3. ​first.last@subdomain.example.co.uk ✅
4. "space allowed"@example.com ✅
5. missing@tld ❌

Regex is great for validating user input but it can do so much more. Maybe we can dig into another use case in a future 101.

Want to test your regex, check out a playground like https://regexr.com.

Keep exploring regex! It's a skill that will serve you well in the Webflow world.

​

Your projects, supported by Slater

The Rive Guy is always creating cool Rive animations with Slater. Go check him out on Twitter and use one of his community library scripts.

Jeff McAvoy | The Rive Guy @jeffamcavoy Ready to add @rive_app linkable buttons to your website? The tutorial is live now! 🤙 We'll use @Slater_App to get this button fully functional on a @webflow site. 📺 https://youtu.be/lhG2tNXrkHQ https://twitter.com/jeffamcavoy/status/1791557928538755240 Jeff McAvoy | The Rive Guy @jeffamcavoy Working on some assets for an updated @rive_app tutorial about making linkable buttons. 3:33 PM • May 22, 2024 2 Retweets 13 Likes

​

Happy coding!

🤙 the Slater Team

​

If Slater helps you create better websites, please support the team behind it.