javascript form validation?

[cpaschen]

I need to add javascript validation to a form/edit view.

I just need to do some simple things (like check to see if a multi-select field has no more than 3 selections).
I've tried to follow the steps from the Joomla docs (https://docs.joomla.org/Client-side_form_validation); however, I can't figure out at all how to make this work within JCB.
I looked through all the JCB videos and the only validation that I could find was related to server-side validation.

I would prefer to have the validation happen onBlur for the specific field.
I would be OK with just having it happen on clicking the submit button (but not allowing the form to be submitted).
And I need to display an error message.

Anyone have some tips or know where to put the code?

[cpaschen]

This is pretty easy, but not documented well that I could find (at least not specific to JCB and in one place).
After some trial and error, here's how I found to properly add validation for browser and server end of things.

1. In the Field create/edit screen, in the 'validate' property's value enter the name of the validation that you are going to run (e.g. "onlythree")
2. In the Validation Rules area create a new Validation Rule with the Name you used above (i.e. "onlythree")
   Enter the server-side validation rule in the PHP (class methods) area
3. In the Admin View where this will be used; in the JavaScript tab; in the Javascript (edit view file) area, enter the javascript code to add the validation to the js validation handler. Something like this:

jQuery(document).ready(function(){
    document.formvalidator.setHandler('onlythree', function (value) {
      if (value.length > 3) {
      return false
      } else {
        return true
      }
    });
});

4. Add a js alert when the validation condition is met. This is 'optional' but will give the user an immediate 'correction' when they have violated the validation rule - rather than waiting until they submit the form.
   Something like this might work:

// Reader-Fiction-Favorite-Category
var ficfavcat = document.getElementById('jform_fiction_categories_favorite');
const fictionfavoriteCategories = []
ficfavcat.onchange = function () {
    var ficfavcatcount = jQuery("#jform_fiction_categories_favorite_chzn ul.chzn-choices li.search-choice").length;
    console.log("count of favorites selected:" + ficfavcatcount);
    var latest_value = jQuery("option:selected:last",this).val(); // get the last value added
    console.log(latest_value);
    fictionfavoriteCategories.push(latest_value);
    console.log(fictionfavoriteCategories);

    if (ficfavcatcount > 3)
    {
        var message = Joomla.JText._('COM_[[[COMPONENT]]]_PROFILE_READER_ALERT_ONLY3_FAVFICCAT');
        alert(message);
        //note language string needs to be set in the view.html.php file to make accessible here
    }
}

5. Add language string to PHP file.
   As noted above, this uses the Joomla.JText feature within JS; however, to make that work, you need to add the language string to the PHP file. You can add that on the Admin View / PHP tab in the "Add PHP (custom document script)" area.
   Something like this:

//custom language strings for js
		JText::script('COM_[[[COMPONENT]]]_PROFILE_READER_ALERT_ONLY3_FAVFICCAT');
		JText::script('COM_[[[COMPONENT]]]_PROFILE_READER_ALERT_ONLY3_FAVFICGENRE');
		JText::script('COM_[[[COMPONENT]]]_PROFILE_READER_ALERT_ONLY3_FAVNONFICCAT');

That should provide both server-side and browser validation on form submit AND an immediate alert to the user related to any rule validation failure (before they submit the form).

Hope that's helpful to someone.
(And if anyone knows a better way to do this, PLEASE suggest alternatives.)