Validation for text and textarea

How do I validate my wordpress contact form7 text and textarea fields that If user enters space to fill the form without any text in it, the field must show validation error at that same time, not when he clicks on submit button to check the all fields. It must check that particular field at the same time if user gives space and tries to fill other field It must show immediate error for the field. you can use blur for it.

This condition works for only phonenumber and email inputs. Why not for every field?

I have wrote code for it but not working

jQuery(document).ready(function($) {
   $('.wpcf7-text, .wpcf7-textarea').on('blur', function() {
      var fieldValue = $(this).val().trim();
      if (fieldValue === '') {
         $(this).addClass('wpcf7-not-valid');
         $(this).siblings('.wpcf7-not-valid-tip').html('This field is required').show();
      } else {
         $(this).removeClass('wpcf7-not-valid');
         $(this).siblings('.wpcf7-not-valid-tip').html('').hide();
      }
   });
});

Please help

The page I need help with: [log in to see the link]