It’s been a long time since I updated the validation engine. In this release the engine get a very small code overhaul, a fix to the inline ajax validation and also, and more importantly, a new feature makes its entrance:

Validation in overflown div and lightbox with scrollable content is now supported

To get the supported mode you need to add this option when instancing your plugin:

$("#formID").validationEngine({
 containerOverflow:true,  // Enable Overflown mode
 containerOverflowDOM:"#divOverflown"  // The actual DOM element container with overflow scroll on it
})

(With overflown hidden parent)
View demo

The big change in this method is that normally the engine will append every error boxes to the body. In this case it will append every error boxes before the input validated. This add a bit of complexity, if you want the error box to behave correctly you need to wrap the input in a div being position relative, and exactly wrapping the input width and height. The easiest way to do that is by adding float:left, like in the example provided.

The default top right position is currently the only supported position. Please use this mode only in overflown div and scrollable boxes, it is slower and a bit less stable (I have been using the engine for 2 years, but only one 1 month with this method). Also, the scrolling will be applied to the overflown parent, not the document body.

Thats it! Hope you like it

You can download the validation engine on the API description page.

Share this article: Facebook Twitter

33 thoughts on “Form Validation Engine 1.7 Online”

  3. Hello,

    I don’t understand how to make a Function Call Validation, i use the example but it doesn’t work.
    How does it do to make a custom function.

    I have 2 radiobuttons with the values (“oui” and “non”).
    To validate the form I need a double validation :
    – a radiobutton must checked
    – and the value must to “oui”

    Is it possible ?

    I tried this :

    In the form I put this :
    Oui
    Non

    In my language js :
    “validatecg”:{
    “nname”:”validatecg”,
    “alertText”:”* Vous devez accepeter les CG”}
    }

    And in the head of the page :

    function validatecg(){
    if($(“#acceptation:checked”).length !== 0;){
    return true;
    }else{
    return false;
    }
    }

    Can You help me ?
    Very thanks

    1. Hello visionmaster,

      did you finally fix the problem with funcCall? I need to use it but doesn’t work…

      A post in the support forum recommends to add some code to jquery.validationEngine.js for 1.6.3, i tried but couldn’t fix it on 1.7.

      Maybe you already solved the problem, could you give me some help?

      Thank you!

  4. That should work

    did you try to debug with firebug and console.log? will try to have a look this week

  5. Cedric, you did a good job!

    But i’m a Russian student programmer just started to learn Ajax.

    So, help me please.
    I try to submit form. If I get isValidate=true everything seems to be OK.
    But,
    1. If i get false, I can’t understand how to code it, how to use array there.
    2. How to add, for example, some message from my PHP file to the text instead of form without reloading page?

    Hope, you understand my English 😉

  6. Hi, great work Cedric.

    I have one quick question if you don’t mind helping out.

    I am wondering how I can close all prompts on the form after a button is clicked, or only have them show for a certain amount of time.

    Basically, I am using the form in a DIV which slides in from the top of the page, but if a user does not submit the form the errors stay on the page even after the div has disappeared.

    I’ve read the closePrompt comments but I’m new to jquery and am having trouble following it.

    Thanks a lot!

  7. Hi: I use the following methodology to clear the errors:
    $(“.formError”).children().remove();
    $(“.formError”).remove();

    Insert this code when the user “closes” the form (slides up);

    Hope this helps—

  8. hi sir

    when we click on submit button or when display error boxes they all are in “Absolute position” and all boxes are placed outside the form but I want to it all error boxes come in inside the form in relative position with error field.

    Please help me here.

    Actually I m using this form in my site. It is excellent form.

    Thanks sir

  9. Hi Wendi, thanks for that. Sorry to be a complete newbie but how exactly do I code that into the button that closes the div?

  10. @pradeep : you need to use the new feature, Validation in overflown div

    @John you need to use : $.validationEngine.closePrompt(“.formError”,true) as described in the api page, there is also an example in the demo source code

  11. I do not check select selected or not.
    I write code:

    Select city
    Moscow
    Sochi
    Peter

    and no validation!

    What is the problem? What am I doing wrong?

  12. I have a problem using the following code on jquery :

    $(‘#buttonforsubmit’).click(function () {
    $.post(“anyfile.php”,$(“form”).serialize(), function(data)
    {
    $(“#container”).html(data);
    });
    });

    The div container is on the same page.

    Events that are fired do not understand, but does not load the information I need on the div. I also overflows firefox

    I tried changing input type submit to type button, and the above code worked. But not validated.

    Is there any solution?

    Thanks

  13. Hello,
    I made some FRENCH translation and correction.
    If you want more, send me a mail 😉

    $.validationEngineLanguage.allRules = {“required”:{
    “regex”:”none”,
    “alertText”:”* Ce champs est requis”,
    “alertTextCheckboxMultiple”:”*Choisir une option”,
    “alertTextCheckboxe”:”* Cette case Ă  cocher est requise”},
    “length”:{
    “regex”:”none”,
    “alertText”:”* Entre “,
    “alertText2″:” et “,
    “alertText3″:” caractĂšres requis”},
    “maxCheckbox”:{
    “regex”:”none”,
    “alertText”:”* Nombre maximal atteind”},
    “minCheckbox”:{
    “regex”:”none”,
    “alertText”:”* Veuillez choisir “,
    “alertText2″:” options”},
    “confirm”:{
    “regex”:”none”,
    “alertText”:”* Votre champs n’est pas identique”},
    “telephone”:{
    “regex”:”/^[0-9\-\(\)\ ]+$/”,
    “alertText”:”* NumĂ©ro de tĂ©lĂ©phone invalide”},
    “email”:{
    “regex”:”/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/”,
    “alertText”:”* Adresse email invalide”},
    “date”:{
    “regex”:”/^[0-9]{4}\-\[0-9]{1,2}\-\[0-9]{1,2}$/”,
    “alertText”:”* Date invalide, format YYYY-MM-DD requis”},
    “onlyNumber”:{
    “regex”:”/^[0-9\ ]+$/”,
    “alertText”:”* Chiffres seulement acceptĂ©s”},
    “noSpecialCaracters”:{
    “regex”:”/^[0-9a-zA-Z]+$/”,
    “alertText”:”* Aucune caractĂšre spĂ©cial acceptĂ©s”},
    “onlyLetter”:{
    “regex”:”/^[a-zA-Z\ \’]+$/”,
    “alertText”:”* Lettres seulement acceptĂ©es”},
    “ajaxUser”:{
    “file”:”validateUser.php”,
    “alertTextOk”:”* Ce nom est dĂ©jĂ  pris”,
    “alertTextLoad”:”* Chargement, veuillez patienter”,
    “alertText”:”* Ce nom est dĂ©jĂ  pris”},
    “ajaxName”:{
    “file”:”validateUser.php”,
    “alertText”:”* Ce nom est dĂ©jĂ  pris”,
    “alertTextOk”:”*Ce nom est disponible”,
    “alertTextLoad”:”* Chargement, veuillez patienter”},
    “validate2fields”:{
    “nname”:”validate2fields”,
    “alertText”:”Vous devez avoir un prĂ©nom et un nom”}
    }

  15. Hello,

    First and foremost, thanks for great tool. It has solved a big problem I was facing in the past, but now with this, it is under my belt.

    I do need a way to be able to disable the validation engine when a certain button is clicked. For example, if users want to save the data they have entered into a form, actually submit it, I want a “Save” button which doesn’t check for validation, and a “Submit” button which will check for validation in the same form. Is that possible, and if so, how can I do it? I have spent much time already trying to figure out how to do it, without any luck. Any help would be greatly appreciated.

  17. Hi ,
    Thanks for this Form validator , i have one question i’m using ajax to check a input , and if it’s wrong i have a red prompt ( that’s normal ) but if i click on the prompt i can submit the form and that s not show again a red prompt

  18. I’m trying to use this in a form that is divided into 4 separate divs. The visibility of the divs is toggled so if you click “Section 1” that part of the form shows, and if you click the title again it closes. Problem is that the error messages don’t go away when the div is closed (I’m guessing because of the high z-index of the error messages). Tried changing the z-index but nothing seems to work…. any ideas?

  19. i’m using “Inline Form Validation Engine 1.7, jQuery plugin”

    all is working fine but sometime if i submit invalid form

    it display error but submit the form.

    can any one ans plz its urgent. plz mail me shirsendu_das@yahoo.com if u can.

  20. Hey,

    Great form. But Im having one problem with the red window moving with the browser when you resize it if you put the form under:

    body {
    text-align:center;
    }

    #Content {
    width:980px;
    margin:0px auto;
    text-align:left;
    }

    The margin:0px auto; makes the problem. But I need it to centre my website. Is there a work around?

  23. Excellent plugin! I’m quite new to jQuery so I’m wondering, how do I get to stop the form from submitting if it does not validate? I use a php form processor so the form submits as soon as I click the button, even if empty.

  24. I need urgent help.

    My code creates a div with Ajax Call, which opens as popup (modal) window, but for some reason the ValidationEngine doesn’t show the error message. I will really appreciate your help.

  25. Am in love with your validation Engine. I have the latest version. Working cool but … there is an issue , have been trying to fix it but
    quite difficult.

    I want to use validation engine on a form inside an overlay Modalbox called Boxy… I love boxy bcos its cool and nice….. but your validation Engine does not really work inside BOXY Modal window….
    I manage to make it work but it doesn’t validate properly.

    When i open a fresh page and open the Boxy Modal box containing form, it works but when i close the boxy modal box and re-open it the validation no longer works

    … only works if i refresh page and reopen modal box, BOXY

  26. Hi,

    I’m not sure where to find some help. I’ve tried to post here http://validationengine.vanillaforums.com…

    So this is my problem : how to add the AdWords conversion tracking code to this ?

    I’ve tried to put some code in the ajaxValidationCallback function, but it doesn’t seem to work :
    function ajaxValidationCallback(status, form, json, options){
    if (window.console)
    console.log(status);

    if (status === true) {
    var google_conversion_id = myId;
    var google_conversion_language = “fr”;
    var google_conversion_format = “3”;
    var google_conversion_color = “ffffff”;
    var google_conversion_label = “myLabel”;
    var google_conversion_value = 0;
    $.getScript( “http://www.googleadservices.com/pagead/conversion.js” );
    }
    }

    Has anyone ever done this before or have you any idea how to do that?

    thanks a lot in advance (and sorry for my poor english…)

  27. I used position-absolute validation engine in the form which I created. It works good, but its not validating jquery dropdown checklistbox.
    Please, tell me me how can I do it.
    Any help realy appreciated…

  29. I tried all this but couldn’t get it to work. I think the problem is that the scrollable div is inside my form (I have one static part on top and the scrollable part on the bottom). Your example has the entire form inside the scrollable div.

Comments are closed.