mandatoryCheck.css

.error input {
  background-color: rgb(255, 255, 255);
  border-color: rgb(194, 57, 52);
  box-shadow: rgb(194, 57, 52) 0 0 0 1px inset;
  background-clip: padding-box;
}

.error {
  background-color: rgb(255, 255, 255);
  border-color: rgb(194, 57, 52);
  box-shadow: rgb(194, 57, 52) 0 0 0 1px inset;
  background-clip: padding-box;
}

.icon-block.error {
  color: #c23934;
  background-color: rgb(255, 255, 255);
  border-color: #c23934;
  box-shadow: #c23934 0 0 0 1px inset;
  background-clip: padding-box;
}

mandatoryCheck.html

<template>
  <lightning-record-edit-form record-id={contactData.Id} onload={handleLoad} object-api-name="Contact"
  data-id="personalDetailsIdentifier" onsuccess={handleSuccess} onerror={handleError}>

      <div class="slds-grid slds-grid--pull-padded slds-wrap pb10">
      <div class="slds-col slds-size_1-of-1 slds-large-size_4-of-12 slds-p-horizontal--small slds-p-top_medium">
        <div class="slds-form-element">
          <label class="slds-form-element__label" for="fName">First name<abbr class="slds-required"
              title="required">*</abbr></label>
          <div class="slds-form-element__control">
            <lightning-input-field data-req="required" id="fName" field-name="FirstName" variant="label-hidden">
            </lightning-input-field>
          </div>
        </div>
      </div>  

      <div class="slds-col slds-size_1-of-1 slds-large-size_4-of-12 slds-p-horizontal--small slds-p-top_medium">
        <div class="slds-form-element ">
          <label class="slds-form-element__label">Middle name</label>
          <div class="slds-form-element__control">
            <lightning-input-field field-name="MiddleName" variant="label-hidden"></lightning-input-field>
          </div>
        </div>
      </div>

      <div class="slds-col slds-size_1-of-1 slds-large-size_4-of-12 slds-p-horizontal--small slds-p-top_medium">
        <div class="slds-form-element ">
          <label class="slds-form-element__label">Last name<abbr class="slds-required"
              title="required">*</abbr></label>
          <div class="slds-form-element__control">
            <lightning-input-field data-req="required" field-name="LastName" variant="label-hidden">
            </lightning-input-field>
          </div>
        </div>
      </div>
    </div>
    <button class="slds-button slds-button_brand slds-m-left_large"
                    onclick={handleSave}>Save</button>
  </lightning-record-edit-form>
</template>

mandatoryCheck.js

export default class MandatoryCheck extends LightningElement {
  handleSave(event) {
    let fields = this.template.querySelectorAll(`[data-req="required"]`);
    let isMissing = false;
    fields.forEach(element => {
        let str = element.value;
        //console.log('Length --> ' + str.length);
        if (!element.value) {
            isMissing = true;
            element.classList.add('error');
        }
        else if (str.trim().length === 0) {
            element.value = null;
            fireEvent(this.pageRef, 'hideSpinner', this);
            isMissing = true;
            element.classList.add('error');
        }
        else {
            element.classList.remove('error');
        }
    });
  }
}