This is a question I often get asked by email, and I think there is enough requests to warrant a small blog post.

All about the DOM

The validationEngine expect your form to be present on the page when you initialize the plugin, and this is where modal plugins fall short. If your using those plugins you generally want to load a new piece of html into your document using AJAX.

In that case you need to initialize the validationEngine after you loaded your modal content. Generally modal plugins have an api that let you do this. Let’s take 2 example, Colorbox and jQuey ui.

Colorbox :

$(document).bind('cbox_complete', function(){
    $("#formID").validationEngine();
});

jQuery UI :

$( ".selector" ).bind( "dialogopen", function(event, ui) {
 $("#formID").validationEngine();
});

That should give you a pretty good idea of what you need to do whatever the plugin.

27 thoughts on “Using the jQuery Validation Engine with modal & dialog plugins

    1. None of the suggestions on here work for. I am using jQuery UI modal to display a Div, and the validation bubbles are not displaying. I init the engine via the open method of the dialog, and still nothing. the validation seems to be triggering, but the bubbles just aren’t displaying.

      any ideas?

  1. use also these options to make it work with absolute positioning of the dialogs:

    autoPositionUpdate:true,
    scroll:false

  2. Actually works!

    $(‘#myDialog’).dialog({
    open: function(event, ui) {

    $(“#myDialog”).validationEngine();
    },
    close: function(event, ui) {
    $(“#myDialog”).validationEngine(‘hideAll’);
    },
    buttons: {
    “Process”: function() {
    if (jQuery(‘#myDialog’).validationEngine(‘validate’)) {
    // … do something
    }
    },

  3. @Cedric: Did you actually test that jQueryUI Dialog code? I could not get it to work. During debugging I replaced
    $(‘form’).validationEngine();
    in your sample code with
    $(‘form’).each(function(){ alert($(this).prop(‘name’)); });
    to give me the names of all forms accessible at that point in the code. It gave me the names of all forms in the main document but not the form in the ajax-loaded dialog.

    @Carlos: Thanks! That did the trick.

  4. Oh! Now it worked ๐Ÿ˜‰ I think that it might have been a browser issue ๐Ÿ™ Anyway, having read your article in depth I saw that you mentioned how to use your plugin with jQuery UI Dialog Modal and for ColorBox (never tried before using ColorBox before or whichever is the correct name of the second modal in your example, so please bare with me if I sound that I’m going around the bushes – lol )

    Anyway, do you need any special instruction to run it with jQuery Facebox?
    http://archive.plugins.jquery.com/project/facebox

    I’m trying now with a replica for a prototype and we are re-using Facebox for messages and as well for creating a new user and inserting it into the db… so bottom line it works on a XHTML document, would it work as well with HTML 5? Anything that I should care about regarding that or not really?

    Thank you very much for the very fine plugin, I think that you guys are doing a great job and if all goes well, I would be able to fall asleep this weekend ๐Ÿ˜›

    Also, shall you need some review in typos I believe that I can scan out your articles… pretty concise and clear writing style though!

    Keep up the good work! and will be looking forward to know your thoughts, JP-

  5. how close all the div.FormError if is inside of Facebox and we close it? Would something like:

    $(document).bind(‘close.facebox’, function() {
    $(document).unbind(‘keydown.facebox’)
    $(‘#facebox’).fadeOut(function() {
    $(‘#facebox .content’).removeClass().addClass(‘content’)
    $(‘#facebox .loading’).remove()
    $(document).trigger(‘afterClose.facebox’)

    // Will this line work?
    $(‘#facebox’).find(‘form’).each(‘div.formError’).hide();

    })
    hideOverlay()
    })

    Is not doing anything but is neither showing me errors. Thanks!

  6. Hi,

    great Work – thank you.

    But with html5 fields it doesnt work…

    e.g.

    Best Regard

  7. I apologize for using this blog. Where’s the forum for validation engine support?

    Every input on the form has a validation rule. I have two buttons, “OK” and “Cancel”. When clicking “OK”, the validation engine should validate. When clicking “Cancel”, the validation engine should not validate and let me redirect to another webpage but I’m unable to figure out how.

  8. I have been working with validationEngine for a little bit, and one of the limitations that I have come across is the lack of custom messages. Another limitation that I have found is that I couldn’t use ‘funcCall[someFunc]’ without using ‘required’ next to it.
    I came up with some alterations to your code that could be very useful and will remove these limitations. Send me a message if you would like that code.

  9. I’m using a jquery dialog that contains a form. However because i’m using the dialog’s submit button to submit the form, the ValidationEngine does not validate the entire form on dialog submit. Your engine will only validate the form if the form contains a submit button.

    Yes there a way to get the dialog ‘s submit button to trigger a form validation?

  10. Hi, is there a way how can validate a string if contains a character? example if the input text have a ‘@’ sign for email it will check if valid mail. the validation is optional. meaning it only check if it is a valid mail.(the input text is either name or email address) How can I implement this in your script?

  11. Hi, I have problem with scrolling while displaying error message in mobile devices, the page should scroll up to 1st error message in my page this functionality is working fine in web browsers(PC) but same is not working properly in mobile browser, scroll position is pointing some other place. Am using jquery validation engine to validate my form (VER:Validation Engine 2.2, jQuery plugin) and jquery mobile to create the form.

    Thanks in advance

  12. Hello,
    I am facing problem with showing validation message in a proper position when change the size of the window, am using jquery validation engine along jquery mobile. When I submit the form the validation message will appear at correct position when rotate the screen or resize it the message will not move to its proper field it will remain in the 1st position itself.

    Please guide regarding this.

  13. I use jQuery-Validation-Engine for validate a form, but I’ve a problem …. I’ve a form in a div divided into tabs and I set the validationEngine like this:

    $(“.test”).validationEngine({validateNonVisibleFields: true});
    On submit works fine both on fields in the active tab in the not-active …. but popup error of the fields in non-active tab is not aligned to the corresponding field.

    The _calculatePosition function seems that ignore the real coordinates of the field-hidden to check…

    Any suggestion?

    Thanks to much

  14. I use jQuery-Validation-Engine for validate a form, but I’ve a problem …. I’ve a form in a div divided into tabs and I set the validationEngine like this:

    $(“.test”).validationEngine({validateNonVisibleFields: true});
    On submit works fine both on fields in the active tab in the not-active …. but popup error of the fields in non-active tab is not aligned to the corresponding field.

    The _calculatePosition function seems that ignore the real coordinates of the field-hidden to check…

    Any suggestion?

    Thanks to much

Comments are closed.