Spry demo - check for a valid URL

There has been a UDF released for a while now that would check to see if a URL is valid. Ben wrote urlExists over a year ago. Along with isValid(), you can check both the form and existence of a URL. For the heck of it - I thought I’d make a quick demo in Spry showing how you can do without refreshing the browser. First take a quick look at the online demo:

http://ray.camdenfamily.com/demos/spryurlcheck/

Don’t hit submit on the button, just enter a URL and click off of it. Do note that the you have to enter a valid URL before the server will check it. (So don’t enter “toaster”, enter “http://www.toaster.com”.)

The code behind this is rather simple. First, look at the form field for URL:

<input type="text" name="homepage" id="homepage" onBlur="validateURL()"> <span id="urlcheckresult"></span>

I use an onBlur to call a JavaScript function. Also note the span next to the form field. validateURL is pretty simple:

function validateURL() { var url = $("homepage").value; if(url == '') return; Spry.Utils.updateContent('urlcheckresult','urlcheck.cfm?site='+encodeURI(url)); }

I grab the value of the URL and ensure it isn’t blank. Next I use updateContent. This was added in the last Spry release. It is a simple way to load a new URL into a div or span. Here I’m simply pointing the span next to my form field to a server side file. The server side file is also rather simple. To cut down on the size I removed Ben’s UDF:

<cfparam name="url.site" default=""> <style> b.good { color: green; } b.sucky { color: red; }

</style>

<cfif len(url.site) and isValid(“url”, url.site)> <cfif urlExists(url.site)> <cfoutput><b class=”good”>Valid URL!</b></cfoutput> <cfelse> <cfoutput><b class=”sucky”>Appears to be an invalid URL</b></cfoutput> </cfif> </cfif> </code>

The only thing that I don’t like about this demo is the speed. Adobe made updateContent blocking, so you can’t do anything while the page is loading. Of course, someone could easily add this to the Spry code.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Comments