URL Validation for Passing Data into Integromat Zapier

Community resources Show & Tell
1

Hey all!

Have spent the last few days struggling with getting data from a client website to pass through the Integromat correctly (as it wouldn’t recognize “google.com” or a URL without a http/https prefix as a valid URL). However, with the help of a couple forums online, I was able to write a JavaScript function that validates that a URL contains “http”, or else it will add it in.

function checkURL() {
var myURL = document.getElementById('Resource-Link').value
var validatedURL = myURL.includes('http')

if (myURL == "") {
return "No value to test."
} else if (validatedURL) {

  return myURL

} else {
var modifiedURL = 'http://' + myURL
document.getElementById('Resource-Link').value = modifiedURL
return modifiedURL
}
}

The only thing that would need replaced within the script to work with your website would be the field name that is being referenced. In the case of my site, this is “Resource-Link”!

Hope this is able to help someone, somewhere in the Webflow-verse. Please let me know if I can assist anyone with this!

1 Like
2

I would suggest that you use a URL validator function in your code. The current code wouldn’t work as expected if you made a typo or had a URL with search parameter anywhere else in the field.

3

Yeah, it definitely isn’t perfect. But for my use-case it allows URLs to be formatted correctly for the single field I need so that it can pass to Integromat without issue.

I just have it set to call the function onblur, and it has worked fine so far!

4

I don’t know what your use case is but the code implies the input may be a domain name or a URL. In my experience if the source is user input then you eventually get typos of various kinds including

  1. http;//google.com
  2. http//google.com
  3. http://gooogle.com

While there isn’t much you can do about scenario 3, scenario 1 and 2 will produce incorrect results with that code. Depending on your use case you may want to flag incorrect input.

A couple of options are

const str = 'http://google.com';
expression = /^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?$/
const regex = new RegExp(expression);
console.log(regex.test(str)); //either true if valid URL or false if invalid URL

Or

let myURL
try {
	myURL = new URL(str)
} 
catch (e) {
  console.log(e); //logs if invalid URL
}
console.log(myURL) //logs valid  URL or undefined
5

Good point! I hadn’t thought of that, actually.

I’m still fairly new to JavaScript, so I definitely appreciate the help on this! :smiley: