Fade buttons/tabs until form field has user input

Question

http://tinyurl.com/8z8rup5

Please take a look at my development so far. I am trying to, in jQuery, disable the tabs on the top of this form, as well as the Next Step links (these are anchors, not input buttons - at least until the submit button) until the fields are filled out on that specific tab. The user may return to previous tabs after they have entered data in the tabs before them. They would not necessarily need to be -correct-, but just have user input, I think.

I'm not entirely sure how to go about it since I am trying to disable anchor links (and fade their opacity) rather than input buttons.

Any help would be fantastic! Thank you.

Answer 1

Try taking a look at this post: How to enable or disable an anchor using jQuery?

Basically you would want to prevent the default functionality of the anchors until certain criteria is met:

$('a.something').click(function(e) {
  if(!valid) 
    e.preventDefault();
});

Answer 2

You can use preventDefault() to prevent the default actions from occuring. So for your navigation links you could disable them using:

$(".desktoponly a").click(function (e){
   e.preventDefault();
});

Obviously you could do the same thing for any other anchor tags in your site. On the button clicks you can check to see if the form is complete and only transition if the form is complete.

See this fiddle:

http://jsfiddle.net/johnkoer/j6X88/4/