Thanks, W.

UPDATE: @Zollie 's final conclusion is right, using the "required" attribute the standard Joomla validation kicks in even in this special case and changes the field into red. Unfortunately this was not sufficient for me as I wanted to have a custom validation icon and message displayed by a custom event handler and it seems that the custom event handler is not called in this special case. Therefore I had to implement my client side validation from scratch not using the built in Joomla mechanism.

Thanks, W.

    <?php 
    // No direct access
    defined('_JEXEC') or die;
    JHtml::_('behavior.formvalidator');
    JHtml::_('behavior.tooltip');
    ?>
    <script>
    
        jQuery(document).ready(function(){
           document.formvalidator.setHandler('myemail', function(value) {
              alert("hello");
              regex=/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
              var result = regex.test(value);
              if (result) {
                document.getElementById("msg-main[Email]").style.display = 'none';
              } 
              else 
              {
                document.getElementById("msg-main[Email]").style.display = 'block';
              };
              return result;
           });
        }); 

    <?php 
    // No direct access
    defined('_JEXEC') or die;
    JHtml::_('behavior.formvalidator');
    JHtml::_('behavior.tooltip');
    ?>
    <script>
    
        jQuery(document).ready(function(){
           document.formvalidator.setHandler('myemail', function(value) {
              alert("hello");
              regex=/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
              var result = regex.test(value);
              if (result) {
                document.getElementById("msg-main[Email]").style.display = 'none';
              } 
              else 
              {
                document.getElementById("msg-main[Email]").style.display = 'block';
              };
              return result;
           });
        });  

...

<form method="post" id="contactForm" name="contactForm" class="form-validate gngcontact">
... 

When I type something in the text field and press tab or click another field, my custom event handler is called and everything works fine. However when I leave the field empty (without typing anything in it) the event handler is not called at all, so I cannot display any warning for the user.

How could I make sure that my custom event handler is called even when the user leaves the text field empty?

The alert in the above code is display if I leave the field after typing somthing, but not if I leave it empty or delete what I typed and then leave the field.

When I type something in the text field and press tab or click another field, my custom event handler is called and everything works fine. However when I enter the field and then leave the field without typing anything, or enter the field, type something, delete it and then leave the field: the event handler is not called at all, so I cannot display any warning for the user.

How could I make sure that my custom event handler is called even in these cases?

The alert in the above code is display if I leave the field after typing somthing, but not displayed in the scenarios described with bold above.