Custom bootstrap error message

Question

I am doing custom form validation at admin side and below is the sample javascript code

Joomla.submitbutton = function(task)
  if(condition){
    document.getElementById('jform_acc_reseller_id').required=true;
    document.formvalidator.isValid(document.id('account-form'));
    return;
}

The above code just shows the standard error message as below

Invalid field: the field label

Instead I would like to show a custom error message like below

Invalid field: the field label : Please Select reseller user

How is that possible?

Answer 1

Let's say I've custom validator "validemail" added in my form XML:

<field
            type="text"
            label="COM_HELPDESK_CC_LABEL"
            description="COM_HELPDESK_EMAIL_DESCRIPTION"
            name="cc"
            class="form-control validate-validemail"
            validate = "validemail"
        />

My server Side validation Code will reside in: components/my_component/models/rules/validemail.php

use Joomla\Registry\Registry;

JFormHelper::loadRuleClass('email');

class JFormRuleValidemail extends JFormRuleEmail {

    public function test(SimpleXMLElement $element, $value, $group = null, Registry $input = null, JForm $form = null) {
        $emails = array($value);
        if (strpos($value, ';') !== false) {
            $emails = explode(';', $value);
        }
        else if (strpos($value, ',') !== false) {
            $emails = explode(',', $value);
        }

        foreach ($emails as $email) {
            if (!parent::test($element, trim($email))) {
                $element->addAttribute('message', JText::_('YOUR_ERROR_MESSAGE'));
                return false;
                continue;
            }
        }

        return true;
    }

}

For the Client side Validation add following script to your component (back-end/front-end)

jQuery('.validate').click(function (e) {
    var msg = {"error": []};
    if (jQuery('#jform_bcc').hasClass('invalid')) {
        msg.error.push(Joomla.JText._('COM_HELPDESK_BCC_ERROR'));
    }
    if (jQuery('#jform_cc').hasClass('invalid')) {
        msg.error.push(Joomla.JText._('COM_HELPDESK_CC_ERROR'));
    }
    if (jQuery('#jform_priority').hasClass('invalid')) {
        msg.error.push(Joomla.JText._('COM_HELPDESK_PRIORITY_ERROR'));
    }
    if (jQuery('#jform_description').hasClass('invalid')) {
        msg.error.push(Joomla.JText._('COM_HELPDESK_DESCRIPTION_ERROR'));
    }
    if (jQuery('#jform_subject').hasClass('invalid')) {
        msg.error.push(Joomla.JText._('COM_HELPDESK_SUBJECT_ERROR'));
    }
    Joomla.renderMessages(msg);
    e.preventDefault();
});

});

Put this language strings in your .ini file

COM_HELPDESK_SUBJECT_ERROR = "Please Enter Subject"
COM_HELPDESK_DESCRIPTION_ERROR = "Please Enter Description"
COM_HELPDESK_PRIORITY_ERROR = "Please Select Priority"
COM_HELPDESK_CC_ERROR = "Please Enter proper Emails in CC section"
COM_HELPDESK_BCC_ERROR = "Please Enter proper Emails in BCC section"

Do not forget to register this Messages in your view.html.php file:

JText::script('COM_HELPDESK_SUBJECT_ERROR');
JText::script('COM_HELPDESK_DESCRIPTION_ERROR');
JText::script('COM_HELPDESK_PRIORITY_ERROR');
JText::script('COM_HELPDESK_CC_ERROR');
JText::script('COM_HELPDESK_BCC_ERROR');