URL input validation?

[niven]

Scope:
So I am asking my users to enter a URL in a form.
The purpose is to show a button (when a URL is present on an entry), that takes them to the URL they supplied.
Simple, right?

Issue:
I’m hitting an issue where any URLs without the ‘http://www.’ protocol will simply open a new tab (via a plugin) with my Bubble URL and the domain appended to the end.
e.g. https://app-name.bubbleapps.io/version-test/index/shop.com
Not great!
URLs following correct format (http://www.shop.com), open the URL as expected.

Currently I have no validation on the input and so the user is free to enter full or part URLs.
So either http://www.shop.com OR shop.com can be entered.
Basically I want to ensure all URLs entered at least have the correct protocols before the domain.

Solution:
What is the best option here?

1. Input validation using a regex.
2. On form submit (create new or edit existing entry), do I filter the value and prepend ‘http://www.’ to the URL.

From there, how would I implement each option?
Obviously I would need to check that the ‘http://www.’ doesn’t already exist and then prepend, otherwise ignore and submit as is.
OR
Am I missing something here and I am simply serving the link the incorrect way and there is a way to avoid plain domains being opened in a new tab as an appended path to my app URL?

[boston85719]

If you know the regex pattern to validate ‘http://www.’ please share it. I put up a post a while back asking if anybody knew it with no responses.

Extract with Regex Input Validation

I have been using some basic regex to validate inputs I am now trying to find a way to validate that a user has entered “www.” and can’t figure a way. The only things I’ve been able to do is get validation that “www” had been entered but not the “.” Does anybody have a regex pattern to do such a thing, or a place online that provides regex patterns for input validation? I’ve been trying to follow this Which helped me to validate for other inputs and criteria, but failing to get things righ…

As I had no responses I decided the best way was to make sure my input had the ‘http://www.’ to begin with, so I used a plugin by @AliFarahat that is pretty useful, although there are some issues with the way it works in practice and I haven’t had any luck with the plugin developer shedding light onto the issues.

New Input Formatter Video Tutorial - Toolit Kit Plugin

@AliFarahat I am curious if there may be a way to fix a couple of issues I am having with the plugin or the input element When a user clicks into the input element the first time, the prefix becomes visible as expected, however, if the user clicks into the input element and doesn’t enter any characters and then clicks out of the input, the prefix is removed from site and a place holder becomes visible instead. When the placeholder is visible and not the prefix, as the user clicks into the …

At this stage, the best thing in my mind was to ignore the poor user experience caused by the plugin and use it anyway and hope for the best on getting some feedback on how to resolve the problems.

After reading your post, I think if you know how to use the regex or a way to prepend the link it would be better.

@niven

Am I missing something here and I am simply serving the link the incorrect way and there is a way to avoid plain domains being opened in a new tab as an appended path to my app URL?

This I don’t know. You may need to share a link to the editor or some screen shots to get more help on that.