Using the jQuery Validation Engine with modal & dialog plugins

by Cedric Dugas on January 23, 2012

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.



31 comments

Great Share!! but still not functional this end.. sorry about that..

by Virtual Teams on February 4, 2012 at 5:16 am. Reply #

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?

by andrew on April 13, 2013 at 3:32 pm. Reply #

not functional this end

by escort on February 6, 2012 at 5:11 pm. Reply #

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

autoPositionUpdate:true,
scroll:false

by joe on February 7, 2012 at 2:29 pm. Reply #

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
}
},

by Carlos on February 22, 2012 at 8:27 am. Reply #

This actually help and works for me. Adding validationEngine on “open” property of dialog

by andreagirardi.it on September 12, 2014 at 4:43 am. Reply #

@Carlos: Awesome … thanks!! Exactly the missing piece right now …

by Curanai on February 23, 2012 at 5:24 am. Reply #

@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.

by Tomas Eklund on March 10, 2012 at 1:17 pm. Reply #

Hey, tried to make a comment with an intended question and it never worked!!? please help :)

by JP on April 4, 2012 at 7:31 pm. Reply #

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 :P

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-

by JP on April 4, 2012 at 7:39 pm. Reply #

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!

by JP on April 6, 2012 at 2:23 pm. Reply #

Display error. View website:

http://dl.dropbox.com/u/41592312/jQuery.validationEngine%20v2.5.3.png

Thanks!

by Carlos on April 11, 2012 at 10:46 am. Reply #

Hi,

great Work – thank you.

But with html5 fields it doesnt work…

e.g.

Best Regard

by tux on May 2, 2012 at 7:29 am. Reply #

Damn, sorry, it was my fault, the html5 fields are correct.

Great Work

Best Regards

by tux on May 2, 2012 at 7:33 am. Reply #

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.

by Michael B on May 5, 2012 at 2:44 pm. Reply #

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.

by Sam Barney on May 24, 2012 at 1:26 pm. Reply #

please send me how to do custom validations inInline Form Validation Engine 2.2.4

by nagendra on June 26, 2012 at 2:27 am. Reply #

I really enjoy the blog post.Really looking forward to read more. Want more.

by Talon Bogue on May 31, 2012 at 4:52 am. Reply #

Seriously nice effort and i would like to implement in mine work also. Thanks Cedric.

by Adam Zoa on May 31, 2012 at 5:05 am. Reply #

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?

by Nelson Maldonado on June 4, 2012 at 8:35 am. Reply #

never mind, i found my error – it’s working.

by Nelson Maldonado on June 4, 2012 at 1:26 pm. Reply #

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?

by ph-buste on June 5, 2012 at 4:58 am. Reply #

I am trying to figure out how to hide any previous error prompts when a new error prompt is displayed. Do you have any suggestions?

by bblackmoor on October 1, 2012 at 4:06 pm. Reply #

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

by Somesh on January 21, 2013 at 6:41 am. Reply #

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.

by Somesh on January 22, 2013 at 8:17 am. Reply #

llll

by fghgh on June 13, 2013 at 8:12 am. Reply #

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

by cecco974 on July 25, 2013 at 11:15 am. Reply #

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

by cecco974 on July 25, 2013 at 11:15 am. Reply #

test

by kk on July 28, 2014 at 6:09 pm. Reply #

hello. I have a single with 4 accordions. Validation is on level input type = “submit” button. i am unable to switch to appropriate accordion on error

by Nilima on October 27, 2014 at 1:56 am. Reply #

私は疑問しワンダフルポストにこの対象?あなたは少し手の込んだことができれば| 感謝感謝をさらに私は非常にあることと思います。 おかげ!
ティファニー 指輪 リボン http://bsassystem.com.ar/ip/tiffany/20141028121036-$~57-76xr.asp

by ティファニー 指輪 リボン on October 29, 2014 at 4:21 am. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.