CiviCRM Community Forums (archive)

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:

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

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!)

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
  });

}