CiviCRM Community Forums (archive)

*

News:

Have a question about CiviCRM?
Get it answered quickly at the new
CiviCRM Stack Exchange Q+A site

This forum was archived on 25 November 2017. Learn more.
How to get involved.
What to do if you think you've found a bug.



  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Post-installation Setup and Configuration (Moderator: Dave Greenberg) »
  • Add custom JavaScript validation to a form
Pages: [1]

Author Topic: Add custom JavaScript validation to a form  (Read 1936 times)

John.K

  • I post occasionally
  • **
  • Posts: 75
  • Karma: 5
  • CiviCRM version: 4.x
  • CMS version: Drupal 7
  • MySQL version: 5.x
  • PHP version: 5
Add custom JavaScript validation to a form
March 19, 2015, 06:47:49 am
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

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 2346
  • Karma: 183
  • CiviCRM version: The Bleeding Edge
  • CMS version: Various
Re: Add custom JavaScript validation to a form
March 19, 2015, 07:04:44 am
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.
Try asking your question on the new CiviCRM help site.

John.K

  • I post occasionally
  • **
  • Posts: 75
  • Karma: 5
  • CiviCRM version: 4.x
  • CMS version: Drupal 7
  • MySQL version: 5.x
  • PHP version: 5
Re: Add custom JavaScript validation to a form
March 19, 2015, 07:31:58 am
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
  });

}

Pages: [1]
  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Post-installation Setup and Configuration (Moderator: Dave Greenberg) »
  • Add custom JavaScript validation to a form

This forum was archived on 2017-11-26.