Making sure a text input contains a valid URL?

Need help
1

We have a step in our app where users are required to enter a URL into a text input field. I can’t find any help on how to validate that a URL has been entered into the text field before proceeding. I’ve seen a couple of mentions about doing this with REGEX, and someone even posted their REGEX parameters for validating a URL, however I’m not quite sure how to integrate that into Bubble.

Any help would be appreciated!

2

I would use Regex, but not bubble’s built in one. For some reason, it never works for me. There’s always something extra I have to do.

With that said, this is what I found online. Tested it and it works!

const input = document.querySelector('#inputId');
        input.addEventListener('change', () =>{
        try { 
            new URL(input.value); 
            bubble_fn_validUrl(true)
            return true; 
        } catch (error) { 
            bubble_fn_validUrl(false)
            return false; 
        } 
    })

-Give your input element an ID. I have it as (‘inputId’).
-You can use the toolbox plugin to use Javascript to check the url. It will return a true/false value.
-Send that value to bubble by adding a Javascript to bubble element on the page. I called it validUrl
-Terminate the workflow if the value is false and display the proper UI message.
-Continue the workflow if true.

Hope this gets you the result you’re looking for!:slight_smile:

3

Thank you SO much, this is exactly what we were looking for!

4

Everything you replied with earlier was a MASSIVE help. I had no idea about the toolbox and js2bubble element. I do have one more question if you’ve got a second though?

So I’ve got everything set up, the script you helped with works perfectly, I’m able to return true/false values based on the URL that’s in the input box. But how on Earth do I set up a way to terminate the workflow if it’s false? I’m extremely new to bubble and can’t figure out where to put in custom if/then statements? Is there a better way to do this other than “if value=true proceed, else terminate workflow and display error message?”

5

Currently at the gym so I can’t provide you with screenshots, but there is a built in “terminate workflow” action in bubble.

Once you add it, you’ll see an “only when” field at the bottom which is where you’ll put in your condition. In this case, the condition will be:
-Javascript to Bubble’s value is “no”.

Be sure you are publishing the value of JS2bubble by ticking the checkbox inside the element.

6

This topic was automatically closed after 70 days. New replies are no longer allowed.