4

I have a plugin which generically handle the creation of a jQuery dialog used for CRUD operations. The markup of the form that is added to the dialog is available externally of the plugin code and the plugin just ask to an http service to provide the markup and when received simply add it to the dialog itself.

I have then created a callback in the plugin (onSetupValidation function) which is meant to be the handle for the plugin user to customize the validation for each form. This is an example of code I am using

var element = $('#mydiv');
element.crudplugin({
    [...]
    onSetupValidation: function(markup) {
        var form = $('#myForm', markup);
        var container = $('<div class="error"><p>Errors were found validating your form. Please correct them and retry.</p><ol></ol></div>')
                       .appendTo(form).hide();
        var validator = form.validate({
            errorContainer: container,
            errorLabelContainer: $('ol', container),
            errorElement: 'em',
            wrapper: 'li',
            highlight: function (element) {
                $(element).addClass("ui-state-error");
            },
            unhighlight: function (element) {
                $(element).removeClass("ui-state-error");
            },
            submitHandler: function (form) {
                [...]
            }
        });
    }
    [...]
});

Well. Let's go to the problems

  1. If I add the validation rules inside the markup (as class attributes) validation does not work at all. Same behaviour if I add the rules in the validate() method

  2. Googling around I have found many samples, expecially here on SO, that uses the .rules('add', rule) method of the validation plugin like in the following sample and all these links recommends to call the validate method before adding any rule like in the following sample

    $("#myField", markup).rules("add", { required: true });

But if I use this method when the istruction get executed I get the following error:

SCRIPT5007: Unable to get value of the property 'settings': object is null or undefined jquery.validate.min.js, line 15 character 257

Any advice?

Sparky
  • 98,165
  • 25
  • 199
  • 285
Lorenzo
  • 29,081
  • 49
  • 125
  • 222

2 Answers2

4

You are definitely on the right track.

The key is that you have to have called validate on the form before you add rules to individual fields within the form.

If you want to see an example where this case is triggered, you can check out my answer to a previous question (or specifically the jsfiddle). In that jsfiddle, if you comment out the last 4 lines of javascript ($('#myForm').validate({/* ... */});) it will trigger the same error message that you are seeing.

It's also not clear from your question, but it's possible that you're calling validate before the form is visible? If so, chances are that isn't helping...

Community
  • 1
  • 1
Ryley
  • 21,046
  • 2
  • 67
  • 81
  • Thanks for your answer. The callback is called during the dialog creation and before the form is displayed. Inside the callback I am calling first validate() and then add rules. I will try to move the callback after the show() method... – Lorenzo Jul 05 '12 at 22:42
  • That will do it for sure - if this is a jQuery dialog, the `open` event would be an appropriate place. – Ryley Jul 05 '12 at 22:47
0

Just to add. If you don't mind using ugly code you could do something like this

var your_new_object = $("#theForm").validate().settings;
your_new_object ... //do some stuff with it
$("#theForm").validate().setting = your_new_object;

Where your_new_object is an updated version of the original settings object

As I said, is an ugly approach, but if nothing else works, give it a try

jchacana
  • 49
  • 4