I notice that you have some lower case error in your validateform function

function validateform() {
  var x = document.getElementByid("fname").value; // here should be getElementById
  if (x.length < 1) {
    alert("Name can't be blank");
    return false;
  }
}

I try this and it works on code snippet.

The blocking point was in my css scroll-behaviour. I disabled it. Now the validation rules are working properly.

html{
font-size: 62.5%;
overflow-x: hidden;
/scroll-padding-top: 6rem;
scroll-behavior: smooth;/
}

I have set the below logic to validate the form input but no alert box is being displayed on submit. Please note that the issue is not related to the setCustomvalidity function. Rather is it related to the alert box not being displayed.

function validateform() {
  var x = document.getElementByid("fname").value;
  if (x.length < 1) {
    alert("Name can't be blank");
    return false;
  }
}

<div class="row">
        <div class="col-25">
          <label for="fname">First Name *</label>        
        </div>
        <div class="col-75">
          <input type="text" id="fname" name="firstname"   required
          oninvalid="this.setCustomValidity('This field cannot be left blank')"
          oninput="this.setCustomValidity('')">        
        </div>
      </div>

<form name="bookingform" action="bookingform.php" method="post" onsubmit="return validateform()">