jQuery Form Validation??

[awasson]

Does anyone know what method of jQuery or scripted validation is being used in CiviCRM 4.3.x, 4.4.x?

I'm tinkering with an extension that has a custom (non-formbuilder) form on it and although I was really happy to see that simply adding required=required to a field adds fancypants client side validation, I would like to add a new method and then add that as a rule.

So for example somewhere in my template I would like to add the custom method:

Code: [Select]

cj.validator.addMethod("isValidDate", function (value, element) {
    . . . A bunch of code
}

Then I want to add the rule:

Code: [Select]

cj('.hasDatepicker').rules("add", "isValidDate");

This would work usually with jQuery.validate but so far I'm not having any success. Any ideas?

Thanks,
Andrew

[mathieu]

Hi,

It's using standard jquery-validate. I'm not very familiar with the internals of how it works, I'm not sure about the best practices, but for example, on a contribution page, I use:

Code: [Select]

cj('#is_recur').on('click', function() {
  if (cj(this).is(':checked')) {
    cj('#priceset .other_amount-content input.form-text').rules('add', {
      max: 25,
      messages: {
        max: ts('Donations in a fiscal year may not exceed $300. Monthly donations are therefore limited to $25.')
      }
    });
  }
  else {
    cj('#priceset .other_amount-content input.form-text').rules('remove', 'max');
  }
});

NB: since the contribution page does not enable jquery-validate by default, I do copy part of templates/CRM/Form/validate.tpl in my Main.extra.tpl.

[awasson]

Thanks mathieu,

I'll give that a try. For some reason even though my form doesn't use formbuilder if I include required = required in a field, it is validated and the messaging UI eye-candy is quite nice. Much nicer than the typical out-of-the-box jQuery messaging.

Anyway, it looks like you've added your rule as a result of a click so I think I'll do the same and either use clicking the submit button or maybe a change of a field.

Thanks again.

Cheers,
Andrew

[Coleman Watts]

CiviCRM's implementation of jQuery validate was done with expansion in mind. If you take a look at templates/CRM/Form/validate.tpl you'll see that extra params and functions may be added to the CRM.validate object. An example of doing so can be found in templates/CRM/Contribute/Form/Contribution/PremiumBlock.tpl.