Add custom JavaScript validation to a form

[John.K]

Hi, I've been trying to add some custom JS validation to the event registration form. This seems to be a form that doesn't use any JS validation out of the box.

I've managed to add a custom validation rule, and apply it to the form, (thanks in part to this article: https://civicrm.org/blogs/kurund/how-implement-client-side-phone-validation)

However, I'm not sure how to get the form to not allow 'Continue' if the form is not valid. Currently my code looks a bit like this:

Code: [Select]

if ( CRM.$(".page-civicrm form[class^='CRM_']").length > 0 ) {

  CRM.$.validator.addMethod(
    "not_all_caps",
    function(value, element) {
      if ((value.length > 1) && (value.toUpperCase() === value)) {
        return false;
      }
      else {
        return true;
      }
    },
    "Please do not use all uppercase letters"
  );
 
  CRM.$(".page-civicrm form[class^='CRM_'] #first_name").valid();
  CRM.$(".page-civicrm form[class^='CRM_'] #first_name").rules('add', {
    not_all_caps: true
  });
 
  CRM.$(".page-civicrm form[class^='CRM_']").submit(function (e) {
    this.crmValidate();
  });
 
}
The JS validation works as expected on the field, but people can still click 'Continue' despite a field being invalid. I was just wondering if there was a better way to implement this (on top of server side validation via the CiviCRM hook).

[Coleman Watts]

crmValidate is not meant to be called after the form is submitted. Try calling it on the form on load.
Is this code in a global js file or tpl.extra? Is it waiting for document ready? The event forms are loaded via ajax so the form might not exist at the time your code executes.
If this is v 4.5 or above, listen for the crmLoad event. In earlier versions there is no event called when the form loads so the only way to achieve it would be to stick the code in the form's tpl.extra file.

[John.K]

Hi coleman,

This is inside a document ready in our theme's custom JS file (probably not the best place for it, I admit).

Thanks, simple fix in the end then, I just moved the crmValidate() ABOVE where the rules are added. When I had it below, the form was showing up with validation errors by default.

So the working code example would be this (obviously it's not a 'model answer' though!)

Code: [Select]

if ( CRM.$(".page-civicrm form[class^='CRM_']").length > 0 ) {

  CRM.$.validator.addMethod(
    "not_all_caps",
    function(value, element) {
      if ((value.length > 1) && (value.toUpperCase() === value)) {
        return false;
      }
      else {
        return true;
      }
    },
    "Please do not use all uppercase letters"
  );
 
  CRM.$(".page-civicrm form[class^='CRM_']").crmValidate();

  CRM.$(".page-civicrm form[class^='CRM_'] #first_name").rules('add', {
    not_all_caps: true
  });

}