Form Validation Engine 1.6 online

Author: Cedric Dugas

Cedric Dugas is an experienced front-end developer and founder of Position: Absolute, based in Montreal, Canada. When he is not doing CSS and jquery (does it ever happen?), he likes to read on web usability and play trumpet. Why don't you follow him on twitter.

Share this article:

3 Comments to “Form Validation Engine 1.6 online”

• 
  Sean October 30, 2009 at 4:31 pm

  Would love to help work on this code. There are a few minor fixes to the english version, as well as some other validation types that I think would be valuable out of the box.

  Feel free to contact me:
  http://www.seangw.com/wordpress/
• 
  Carlos Cuesta I. November 2, 2009 at 1:42 pm

  Felicitaciones por tan excelente componente.

  Saludos desde Colombia
• 
  John November 10, 2009 at 10:30 am

  Hi All,

  I wanted to say, “Nice job”. It lives up to your requirements of being fast to implementation and I love the bubbles instead of pushing elements around a layout.

  I did however need to add a function to reposition the prompts. I’m using the jquery ui layout plugin and when panes are opened, closed, shown, hidden or a pane is scrolled the validation prompts would not move, but stay stationary. Not good as you can imagine. I needed a function which I could call when resizing or scrolling occurred in the layout. Below is the function I added just in case your interested in implementing some form of it.

  repositionPrompt : function(caller) { // Reposition Prompts
  var divFormError = $(“div.”+$(caller).attr(“id”) + “formError”);
  callerTopPosition = $(caller).offset().top;
  callerleftPosition = $(caller).offset().left;
  callerWidth = $(caller).width();
  inputHeight = $(divFormError).height();

  /* POSITIONNING */
  if($.validationEngine.settings.promptPosition === “topRight”){
  callerleftPosition += callerWidth -30;
  callerTopPosition += -inputHeight -10;
  }
  if($.validationEngine.settings.promptPosition === “topLeft”){
  callerTopPosition += -inputHeight -10;
  }

  if($.validationEngine.settings.promptPosition === “centerRight”){
  callerleftPosition += callerWidth +13;
  }

  if($.validationEngine.settings.promptPosition === “bottomLeft”){
  callerHeight = $(caller).height();
  callerleftPosition = callerleftPosition;
  callerTopPosition = callerTopPosition + callerHeight + 15;
  }
  if($.validationEngine.settings.promptPosition === “bottomRight”){
  callerHeight = $(caller).height();
  callerleftPosition += callerWidth -30;
  callerTopPosition += callerHeight + 15;
  }
  $(divFormError).css({
  top:callerTopPosition,
  left:callerleftPosition
  });
  return true;
  },

  Thanks for a great plugin.