Documentation for client-side validation API?

I have been trying to write javascript to integrate the International Phone Input field ( intl-tel-input ) into CB for my site. Despite searching high and low, I can't find any documentation for CB's validator API. Is there any? If not, at least an example script?

I've tried using the documentation for joomla's client-side validation, but CB seems to override that, and work very differently.

Specifically, I'm trying to integrate the nice interactive error feedback of intl-tel-input into CB. I got it working in isolation (outside CB) within a few minutes. I've found code snippets in various CB forum posts that have got me part-way there. But I've been trying to guess code for days now and only occasionally hitting on the right answer to progress a little further each time.

I can at least register the validator, and detect that validation has failed. But I still haven't found how to do things like:

• block submission when there's an error
  • (I've tried to mimic classes I see appearing when I type invalid input caught by the browser, e.g. required field empty); 
• make the error message appear under an incorrectly typed field
  • I've tried mimicking the way error messages appear under the field when I force the browser to detect an error
  • but the div doesn't open up, even though I've written the error message into it and changed its display and error properties so that it should

I'm not asking for direct help solving these problems (at least not yet). I'm just asking where the documentation is so I can try to solve them myself without having to guess.

Joomla 5.4.4; CB 2.11.0

Our validation is an extension of the jQuery Validation plugin. We don't have any specific documentation for this since it's just using that plugin. It's primarily interfaced with the cbValidator class. You can use cbValidator::addRule to inject a new validation rule without needing to really know how to use jQuery Validation as it'll string most of the JS up for you.

How you interface with that API is up to you, but given you're basically adding a new fieldtype I'd recommend making a custom fieldtype plugin. There's several examples of how to do that throughout our plugins, but I'd start with CB Query Field and CB Code Field since that's all those two plugins do.

If you just want to inject the validation rule you could probably do a Code action in CB Auto Actions on onBeforegetFieldRow trigger. Below is how to use cbValidator to add a rule.

Structure Example
The JAVASCRIPT_HERE only has 2 properties. "value" which is whatever the value is the user input or selected and "element" which is just the input itself. New validation rules can be added entirely from jQuery as well if you want. Below is an example of that.

Neither of these add the rule to anything yet. You either need to add "data-rule-RULE_NAME_HERE" attribute to your input when outputting it or dynamically with JS.

All of this will basically be gone in CB 3.0 though as we'll be just using native form validation behavior or Joomla's form validation. So might want to leave a TODO note that eventually it'll need to be redone a little bit.

Thank you.

I had worked out a few days ago that I needed to use jQuery, but just having it confirmed that CB's validation extends the jQuery Validation Plugin is documentation. Unfortunately the documentation for that plugin has been sitting on an inaccessible server (blocked by invalid SSL cert) for nearly 3 years. But I managed to access the last accessible copy (14 Jul 2024) from the Wayback Machine.

Whatever, I've discovered that the reason nothing has been working as expected was that my script loads after jQuery 3.7.1 (in NoConflict mode) loads, but then a second version of jQuery (3.5.1) loads before the jQuery validation and cbvalidation plugins loads. I used the Joomla headTags module to inject my script into the head so I don't seem to have any control over where it is injected. I've tried various ways of holding back for this dependency and hooking onto the same jQuery version as the cbvalidation plugin uses. So far without any joy. Any advice on that please? I'll keep trying in the mean time.

Use CB Auto Actions (Code action) on the onAfterUserProfileEditDisplay and onAfterRegisterFormDisplay triggers or CB API to inject jQuery into CBs asset loading pipeline otherwise yes you might have load order problems. You can also just turn off CBs jQuery in CB > Configuration > Integrations to use Joomla's to avoid duplicate loading and get rid of NoConflict problems. This is all relatively old since well we've been around for over 15 years. CB 3.0 will be slowly gutting all of this jQuery out in favor of AlpineJS + HTMX as well as just plain ol' JS.

Just before seeing your reply, I finally found how to hook onto the correct jQuery.
From the console while loading a page, I used this search to find the magic name of CB's jQuery (I had tried various combinations of upper/lowercasing, but not "cbjQuery"):
>> console.log('Searching window for other jQuerys:', Object.keys(window).filter(k => k.toLowerCase().includes('jquery') && window[k] && window[k].fn));
Then, at the start of my outer function() I now poll for
if (window.cbjQuery && window.cbjQuery.validator)
or a timeout before continuing.

I'm loathe to switch to CB Actions now, given I've lost a whole week trying to work out how to make more than nothing happen, and I've finally succeeded. Unless you give a good reason why the above polling approach is really bad (I hate polling, but...). Esp. if this has all got to change with the ditching of jQuery soon.

Now I've finally discovered that CB uses the jQuery validation framework, and that it spells it "cbjQuery", everything I was trying to do is magically working.
In case anyone in CB does feel the urge to write some documentation, there is at least one other CB-specific thing the validator does: on validation failure it adds a class called cbValidationError to the input element, altho I'm not sure what further actions then depend on the existence of this class.

PS. I only started with CB and started learning javascript a week ago (and I'd never used Joomla either), so I didn't have the confidence and background context to know whether nothing happening was due to some other stupid error on my part or not.
 

We use cbjQuery because we're using NoConflict. Joomla previously would be behind on jQuery version. So we had to implement newer jQuery version without breaking Joomla. Like I said we've been around for a very long time. As in Joomla 1.0 long time. A lot of these implementations are just technical debt we'll be clearing out with CB 3.0.

You shouldn't need to poll anything. Where are you trying to add your custom JavaScript? If it's from PHP all you need to do is be sure CB is loaded, which you can do with the below documentation and use cbValidator::addRule to inject your validation rule into the page.

www.joomlapolis.com/documentation/127-community-builder/279-tutorials/18357-including-cb-api-for-usage-outside-of-cb

CB Auto Actions won't really require any learning. It's a no-code or low-code tool depending on the auto action. Basically just a few parameters to adjust. The below for example will let you inject whatever jQuery you want into profile edit and registration pages.

Global
Triggers: onAfterUserProfileEditDisplay, onAfterRegisterFormDisplay
Type: Code
User: Automatic
Access: Everybody
Action
Method: jQuery
Code:
That's all there is to it. You can even use CB Content Module funny enough. It supports outputting custom jQuery on any page the module is rendered so if that'd be easier for you that can also work. Neither require any coding beyond whatever jQuery or JavaScript you supply.