Skip to Content Skip to Menu

Documentation for client-side validation API?

5 hours 41 minutes ago #343677 by BobBriscoe
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

Please Log in or Create an account to join the conversation.

  • krileon
  • krileon
  • ONLINE
  • Posts: 50313
  • Thanks: 8616
  • Karma: 1472
1 hour 50 minutes ago #343678 by krileon
Replied by krileon on topic Documentation for client-side validation API?
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
Code:
cbValidator::addRule( 'RULE_NAME_HERE', 'JAVASCRIPT_HERE', 'INVALID_MESSAGE_HERE' );
Example
Code:
cbValidator::addRule( 'isapple', 'return ( value === 'apple' );', 'Not an apple!' );

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.
Code:
$.validator.addMethod( 'maxWords', function( value, element, params ) { return this.optional( element ) || ( $( value ).text().match( /\b\w+\b/g ).length <= params ); }, $.validator.format( 'Please enter {0} words or less.' ) );

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.


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

Moderators: beatnantkrileon
Powered by Kunena Forum