Show red error field on checkout and show reason bellow

Hi,

some customers tell me that checkout is little bit confusing when there is error in customer_details it don't show where is error until you go down. Is possible to make field with error red border when customer click "save changes" and write bellow field what is wrong /missing like "you must enter valid email"?

Here is sample:

not a very beautiful method, but you can do something like below:
https://github.com/litecart/litecart/blob/2.6.2/public_html/includes/entities/ent_order.inc.php#L570

// Validate customer details
      try {
        if (empty($this->data['customer']['firstname'])) {
           $inputName = 'firstname';   
           throw new Exception(language::translate('error_missing_firstname', 'You must enter a first name.'));
        }        
        if (empty($this->data['customer']['lastname'])) {
            $inputName = 'lastname';
            throw new Exception(language::translate('error_missing_lastname', 'You must enter a last name.'));
        }
        if (empty($this->data['customer']['address1'])) {
            $inputName = 'address1';
            throw new Exception(language::translate('error_missing_address1', 'You must enter an address.'));
        }
        //....and so on

And some later in the catch:
https://github.com/litecart/litecart/blob/2.6.2/public_html/includes/entities/ent_order.inc.php#L615

   } catch (Exception $e) {        
      ?>
      <!-- add div in DOM after each input with the error message -->
      <script> $('input[name="<?php echo $inputName; ?>"]').after('<div class="input-error"><?php echo $e->getMessage(); ?></div>');</script>    
      <?php
        return language::translate('title_customer_details', 'Customer Details') .': '. $e->getMessage();
      }

And for your styling

.input-error {
  background-color: red;
  color: #fff;
  padding: 5px;
  border-radius: 8px;
}

Thanks!

Will try!

For client side validations see this event method:
https://www.w3schools.com/tags/ev_oninvalid.asp