Documentation for client-side validation API?

Where are you trying to add your custom JavaScript?

As I said, "I used the Joomla headTags module to inject my script into the head." This injects my scripts before CB's jQuery scripts (but so does CB Auto Actions - see the end of this posting).
I've tried temporarily removing my headTags config for my user profile and register menus.

Instead, I've now removed polling from my script, installed CB Auto Actions and configured as you specified, except for Method I used javaScript, not jQuery, and loaded two css / js dependencies first:

• Method: CSS (URL) [library]
• Method JavaScript (URL) [library script; 311kB]
• Method JavaScript (URL) [my script; 11kB]

In my script, I've still wrapped my jQuery in this condition:
    if (window.cbjQuery && window.cbjQuery.validator) { ...}
Execution now fails to reach my validator. Using console log messages, I've found it's failing the above if() condition.
If I reinstate the polling, the above condition succeeds, and it all works again.

Or for CB Auto Actions, did you advise to use the jQuery Method specifically, knowing that JavaScript (URL) wouldn't work, for some reason?

________________
FYI, inspecting the HTML served in each case, here's a few of the salient scripts in their order in the head:...
With headTags:
    ...
    intlTelInput.css
    ...
    jquery.min.js?3.7.1
    jquery-noconflict.min.js
    ...
    intlTelInputWithUtils.min.js
    intlTelInput_cb_validation_practical.js
    ...
    jquery-3.5.1.min.js
    ...
    jquery.validate.min.js
    jquery.cbvalidate.min.js

With CB Auto Actions
    ...
    intlTelInput.css
    ...
    intlTelInputWithUtils.min.js
    intlTelInput_cb_validation_practical.js
    ...
    jquery-3.5.1.min.js
    ...
    jquery.validate.min.js
    ...
    jquery.cbvalidate.min.js



 

Your jQuery needs to use the jQuery method. You can't put it in JavaScript as that won't be properly wrapped by the jQuery NoConflict logic and document load process. You won't even need your IF check in it. Your Code action can have 2 rows. First one being your JavaScript and the second one being your jQuery. That should then work as expected.

Sry, I don't understand (x2).

Q1.

Your Code action can have 2 rows. First one being your JavaScript and the second one being your jQuery.

Do you mean "First one being the library JavaScript, and the second one being your jQuery"?
And presumably I still have the CSS before them both?

Q2. When you say "the jQuery method", it's not clear (to me) exactly what syntax will be expected. The Reference Guide for CB Auto Actions doesn't go into this much detail. And searching forums gives various syntaxes, but none look close enough to my case to be able to rely on them.

I'll start by giving the structure of my JS wrapper:

    (function() {
        // Polling logic eventually calls...
        registerTelMethod(window.cbjQuery)
        
        function registerTelMethod($cb) { ... }
    })();

To produce unwrapped syntax, I need to know whether CB Action executes it, so there would be no wrapping at all? Like this...

    function registerTelMethod($) { ... }

Or whether I need to make it self-execute:

    (function registerTelMethod($) { ... })();

Or to pass the jQuery context to it, would this be the expected syntax instead?

    $(function registerTelMethod() { ... })();

 

Do you mean "First one being the library JavaScript, and the second one being your jQuery"?
And presumably I still have the CSS before them both?

Sure, you can have as many rows as you want. So load the CSS, then your JavaScript, and finally apply your jQuery. It'll output into the header in the proper orders automatically.

Q2. When you say "the jQuery method", it's not clear (to me) exactly what syntax will be expected. The Reference Guide for CB Auto Actions doesn't go into this much detail. And searching forums gives various syntaxes, but none look close enough to my case to be able to rely on them.

You would just provide whatever your jQuery is. For example the below should work fine to add a new validation method. You don't need to do any of the encapsulation you're doing.

Method: jQuery
Code:
Now we can take this a step further and force this validation rule on any input we want. The username field for example is an easy target. So for example the below would add that above validation rule to it.

Method: jQuery
Code:
I went ahead and tested this confirming the above is a fully working example as well. This uses the setup provided earlier, which is below.

www.joomlapolis.com/forum/professional-members-support/247999-documentation-for-client-side-validation-api?start=0#343689

Your actual validation logic should be encapsulated inside of the isTea method. Notice it first checks if the input is optional. That's mandatory to deal with required/non-required inputs. Next it checks if the value is "Tea". That's all there is to it. It should return true/false when the field is valid or not.

How you apply the rule to your inputs is entirely up to you. You could add a CSS class to your field in CB > Field Management then target it using that. You could target it by field id using its field row. You could target it by name using an id match. That's entirely up to you.

Beyond that I'm not sure what more to suggest. I've no clue how your 3rd party JavaScript works so I've no idea if its validation logic works within this. It doesn't particularly look like it needs validation and is primarily just a format aid, which would ideally just be a new fieldtype plugin to add a new fieldtype to either CB or Joomla (CB can utilize Joomla user components using the Joomla fieldtype).

Inside the function I gave, I do indeed have an addMethod function.
However, there's also another function in there that finds and sets up each field to be validated within the form. For each field it sets up call-backs on the validator and event listeners that call the validator. Do I have to wrap all this into one statement? Or can I just paste a list of statements into CB's jQuery Method box?

I had already found examples like the one you gave on the forums, but my code is more involved. I was trying to give the code structure at high level. However, I think you need me to go one level deeper - in order to explain the syntax changes CB needs for more involved code like mine. I've given BEFORE and AFTER code highlighting the actual code changes red/green, but using strike-through rather than colouring for the structural changes. Here goes:

________________________
(function() {
    // Within a polling loop (not shown)
    if (window.cbjQuery && window.cbjQuery.validator) {
        registerTelMethod(window.cbjQuery);
    }

    function registerTelMethod($cb) {
        $cb.validator.addMethod("tel", function(value, element) {
        // ...
        }, function(params, element) {
            return element.dataset.validationText || "Invalid phone number";
        });

        setupMyPhoneFields($cb);

        function setupMyPhoneFields($cb) {
            const containers = document.querySelectorAll(".validate-tel");
            containers.forEach(container => {
                const valTelField = container.querySelector('input[type="tel"], input[type="text"]');
                // Initialize intl-tel-input on each valTelField (not shown)
                // Add validation attribute to each nested input element
                valTelField.setAttribute('data-rule-tel', 'true');
                // Re-initialize the validator to pick up the new attribute
                const validator = $cb(valTelField.form).validate({
                    // define callbacks (highlight:, unhighlight:, etc)
                    // which alter depending on modal logic (not shown) ...
                });
                // Add event listeners to each valTelField
                valTelField.addEventListener('input', () => {
                    // Depending on modal logic (not shown) specific to each field instance,
                    //  trigger validation on that field
                    validator.element(valTelField);
                });
                // repeat for other events
            });
        }
    }
})();


_______________

I think CB needs it to look like the following. I believe the scoping and execution order will all still work:

_______________
$.validator.addMethod("tel", function(value, element) {
// ...
}, $.validator.format(element.dataset.validationText || "Invalid phone number") );

const containers = document.querySelectorAll(".validate-tel");
containers.forEach(container => {
    // same code within forEach as above ...
    $(valTelField.form).validate({
        // define callbacks as above...
    });
    valTelField.addEventListener('input', () => {
        // Depending on modal logic (not shown) specific to each field instance,
        //  trigger validation on that field
        $(valTelField.form).validate().element(valTelField);
    });
    // repeat for other events
});
________________

In summary, my code all worked fine outside CB. I just need to know what "jQuery-only" syntax CB expects/allows, in order to run it.



 

jQuery is JavaScript so yes you can just put all the JS + jQuery in there. Just don't override $ and you're fine as that's the jQuery global.

I think CB needs it to look like the following. I believe the scoping and execution order will all still work:

Correct. All the wrapper code is handled automatically on output.