Documentation for client-side validation API?

I have now been trying to get my validation script to integrate with CB for nearly 3 weeks without success. It took a few hours to write the original JS code and get it working (without any integration into CB), so this is extremely frustrating.

I think I've worked out what the problem is, but after more hours of digging, I still can't find a solution: I have been trying to define options using validate() on my form, but the jquery.cbvalidate.js script has already initialized  validate() on the form, and I can't initialize it a second time. This appears to be working from the JS environment, because my script usually wins the race against cbvalidate to initialize the form first. However, from the CB Auto Actions/jQuery method, cbvalidate always wins, which is why my efforts never work in that environment.

What is the proper way to extend a few options of validate() that have already been initialized by the jquery.cbvalidate.js script?

The only additional validate options that I need are shown here (using my code that doesn't work in the jQuery environment):
I have tried And I have tried setting the errorElement and extending the class options by manipulating validator.settings.errorClass or validator.settings.validClass manually. But all to no avail.

Background (why I need to do this)
I am trying to use the validation of intlTelInput on fields for phone number input. It validates phone numbers against 240 country-specific standards, and it allows me to configure it so that the user can enter a phone number in the various national formats that most people in any particular country recognize (with parentheses, spaces, dashes, etc), rather than requiring them to understand international phone number formatting. It also gives country-specific placeholders in each national format. I want this because a correct phone number is essential for subsequent stages of the site's booking process.

cbvalidate toggles the is-invalid class, whereas intlTelInput needs both is-valid and is-invalid to toggle. When I successfully register validClass: "is-valid", the border of any field containing a valid value goes green and a big green tick appears within the field. But this never happens when using the CB Auto Actions jQuery Method (I believe for the reason given above).

The rendering of invalid fields and their error messages all works correctly, whether or not my validate options register. Except, if my registration of validClass: "is-valid" succeeds, I need the other two options to keep any error messages in the correct location and colour.


 

What you keep linking isn't just validation. It's an entire field type with a custom dropdown, styling, and other JavaScript unrelated to validation. You should ideally just be making a new field type plugin for either Joomla or CB that includes everything you need and then just use that field type. Some examples of field type plugins are CB Code Field and CB Query Field.

Below is a fully working example of injecting a new validation rule into CB, but that's just a validation rule. It just takes an inputs value and compares it returning true/false based off whatever conditions are required. That's what a validation rule is.

Global
Triggers: onAfterRegisterFormDisplay, onAfterUserProfileEditDisplay
Type: Code
User: Automatic
Access: Everybody
Action
Method: jQuery
Code:
You can confirm this yourself by creating that auto action then editing the username field and it will error if the username isn't set to "Tea". That's all the validation is meant to do. You can even add is-valid here if you like by adding it to element if the value is valid.

The only additional validate options that I need are shown here (using my code that doesn't work in the jQuery environment):

You're overriding the initialization of the form validation that CB itself does. So you've lost all of the behavior CB Validate provides. We provide a dozen different jQuery events to hook into CB Validate for you to add whatever customized display logic you like. Example as follows.

Global
Triggers: onAfterRegisterFormDisplay, onAfterUserProfileEditDisplay
Type: Code
User: Automatic
Access: Everybody
Action
Method: jQuery
Code:
The above will work for both registration and profile edit on frontend. This is a working example. So you should see is-valid added to any input that passes validation check. You can find those events and more in the below file.

/components/com_comprofiler/js/jquery/jquery.cbvalidate.js

They're all triggered on the root form element so you just need to bind to them from there.

Please reread the "why I'm trying to do this" at the end of my previous post.

I would not have spent 3 weeks trying to do this, unless I really wanted to do it. The work that went into the intlTelInput is immense, so I want to integrate it into CB. I have got it all working with CB except for the need to add one class. It is not useful to be told to do something else instead of what I am trying to do - especially something I have nearly completed except for one final step. Please try to answer my question.

[EDIT]: It's possible that the second half of your response does nearly answer my question. I'll try to integrate that into the rest of my code, and let you know.
 

Thank you, that last code snippet was indeed the missing piece.

I'm not sure how I could have made this easier for you to answer at the start of this thread. I did say I was integrating intlTelInput and gave a hyperlink to it. I think, when I said that I couldn't get the validation working you took that to mean I wanted to add some CB validation, rather than I couldn't get the pre-existing intlTelInput validation to integrate with CB's validation approach. I guess I should have been clearer on that.

Returning to my original question ("Where's the documentation?"), knowing the following would really have helped, so I've summarized here for anyone searching this forum in future:

• That (I assume) the jQuery method of CB Auto Actions runs within a closure like so:
  (function($) {
      // YOUR CODE HERE
  })(cbjQuery);
• That CB jQuery validation is not like regular jQuery validation, in that one can no longer extend any options using validate() due to the way CB has extended it
  • Telling me that CB's jQuery validation is an extension of the jQuery Validation plugin was true but it led me into the weeds, by omission.
• That, in order to further extend validate() options that have already been extended by CB jQuery validation, CB provides a list of events that fire when it is extending regular jQuery validation, so that one can add further extensions when those events fire. The list is in this script:
  • /components/com_comprofiler/js/jquery/jquery.cbvalidate.js

And finally, my code is attached for anyone who might find it useful. Within the code, search for comments starting 'Requires:' for prerequisite configuration.
And here's an example page: oldwaydogfields.co.uk/joomla/cb-registration
(This will become oldwaydogfields.co.uk/cb-registration once the site moves to production - hopefully soon now!)
 

jQuery code attached to (slightly) correct that attached to my previous post.