Category: Javascript

Preventing double form submissions with Parsley form validation

07/29/2016 Aaron Belchamber No Comments

Thanks to Jon Leigh for this snippet!  If you use Parsley form validation, a reliable form validation library, here’s an easy way to prevent double submissions of forms.  This disables the form submission button only once the form passes Parsley’s form validation.

$.listen('parsley:form:validated', function(e){
    if (e.validationResult) {
        /* Validation has passed, prevent double submissions */
        $('button[type=submit]').attr('disabled', 'disabled');
  }
});

I’ve implemented this in a few different places and it works flawlessly!  This is especially useful for mobile device users on slow Internet connections where double submissions can be more prevalent.  I hope this helps some businesses out there, it’s helped WordPress Developers and Symfony experts alike improve visitor UX while reducing complaints from people who may have been charged twice.


Google Chrome’s form autocomplete feature — shutting it off to avoid UI chaos for complex forms

06/07/2015 Aaron Belchamber No Comments

All browsers have their idiosyncrasies — Internet Explorer had so many Microsoft is changing its name.

Here’s another one of a hundred browser “idiot syncrasies” that wasted so much time.  I’ve always developed sites first for Firefox then Chrome then found I had to add more hacks on top for IE, the infamous “shiv” code still makes me shake my head — if only we didn’t have to waste so much web development time worrying about all those browsers and devices and focus on the solution.  If only we’d know the standard tires would work on every standard road!  Things are getting much better and standardized, but even the surge of Chrome users may find the latest updates are causing interface issues and new UX challenges.

One issue is dealing with forms, autofills and validation.  For Google Chrome, I wasted hours with a form auto fill behavior and discovered you have to set  autocomplete=”false”  instead of to “off” for the fields you don’t want the browser to automatically reset and take over.   It can cause real problems with certain forms that keep defaulting to the wrong state in a credit card because a user entered a different state elsewhere and didn’t notice it.  This could be the difference between making a sale or a customer leaving because the credit card information is incorrect.

For web developers out there, you all know Stack Overflow, this is the usually the first place web developers look when they are stumped, this is one of those times where once I realized it was a Chrome issue it took me two minutes to Google the problem, find the problem on Stack and implement the change.  It’s great when you encounter an odd problem and find the exact solution so quickly.

Here’s the link for more information, I hope this helps someone save some time!

http://stackoverflow.com/questions/15738259/disabling-chrome-autofill


An example of browser sniffing: Detect browser so your website can accommodate certain browser limitations or you want to isolate certain behavior and content to affect users only using particular browsers.

03/22/2014 Aaron Belchamber No Comments

Below is a sample of a code snippet I’ve used in different forms to achieve a better website experience for more visitors.  When I have time, I try to unlock more and improve more, after using Google Analytics to see what segment of visitors deserve more attention.  You need to  prioritize, but when so many visitors are on iPhones and iPads, you really need to test your website on Safari on those devices.  Often, Chrome and Safari seem to agree a lot when it comes to displaying web pages, but sometimes you need to fix those few differences — often the most important things like navigation buttons or your header logo will look displaced, or worse, not even show up.

You may find you need to just clear a div after others have floats, you may find you need to delve deeper and isolate IE 9 or Chrome for certain issues, both with CSS, content, OR behavioral code (like JavaScript or JQuery.)

Here is an example of a simple “browser sniffer” script in JavaScript.  Of course, you would replace the “alert” commands and put your real action based on the conditions, but it should be enough to get you started.


<script type="text/javascript">

var browserInfo = navigator.userAgent.toLowerCase();

if (browserInfo.indexOf(‘safari’) != -1) {

if (browserInfo.indexOf(‘chrome’) > -1) {       alert(“Chrome″);     } else {       alert(“Safari″);     }

}

</script>

 

Since web browsers are different, shouldn’t you expect your website will look different on different browsers?

Yes.  Safari will often show your beloved gradients you put on your website upside down.  Don’t worry, it’s not you.  It’s happened to plenty of people and there are plenty of explanations like “Safari doesn’t understand gradient angles in CSS.”  But Internet Explorer 10, FireFox and Chrome does?  Yes, it will happen to you, I’m sure you’ve discovered that it is IMPOSSIBLE that your website will display exactly the same in every browser in the world on every different computer system.

Some reasons are really good and the flexible and proactive (sometimes reactive) browser market has also empowered web users to allow them to have access to tools to improve their web experience.  The reasoning goes, just like you can’t make sure your website visitors don’t wear glasses, you should be happy those who need to wear glasses are wearing them so they can actually read and appreciate your website.  The same goes for browsers and their openness to user customization.  Many people with poor eyesight will zoom your text out.  What about those who can’t see?  There are accessibility tools to help the blind use the web and these are all good things.

So, it’s challenging to keep up with all the new browsers and CSS3, HTML5, ICANN standards, and it will continue to become more complex.  Things will accelerate, so be happy that we’re all using the web and have tools available that will allow us to improve not only visitors to our website and their experience, but our own experiences on the web.  It’s a good thing Google, Bing and Yahoo are always trying to improve their search results for us, it’s evolution of something that still has so much more potential to unleash.  Also, it’s not easy, so some people won’t have the stomach or the attention to detail, this is a growing niche market as a web developer.  Don’t under value the need to fill a niche in a world where everyone’s jumping in!