You need to stop the submission if an error occured:

HTML

<form name ="myform" onsubmit="return validation();"> 

JS

if (document.myform.username.value == "") {
     document.getElementById('errors').innerHTML="*Please enter a username*";
     return false;
}

Have a go with this version using addEventListener and preventDefault

document.getElementById("myForm").addEventListener("submit", function(e) {
  const errDiv = document.getElementById("err");
  errDiv.innerHTML = ""
  const err = []
  if (this.name.value.trim() == "") err.push("Name is empty");
  if (this.sku.value.trim() == "")  err.push("SKU is empty");
  if (+this.price.value == 0)       err.push("Price is empty");

  if (err.length) {
    errDiv.innerHTML = err.join("<br/>");
    e.preventDefault(); // stop submit
  }
})

<form id="myForm" action="/action_page.php" method="post">
  Name: <input type="text" name="name" /> 
  SKU: <input type="text" name="sku"> Price: <input type="number" name="price">
  <input type="submit" value="Submit">
</form>
<div id="err"></div>

You can now use the HTMLFormElement.reportValidity() method, at the moment it's implemented in most browsers except Internet Explorer (see Browser compatibility at MDN). It reports validity errors without triggering the submit event and they are shown in the same way.

See HTMLSelectElement.setCustomValidity()

The HTMLSelectElement.setCustomValidity() method sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.

You're currently never resetting the custom validity message, so it remains 'Custom message: greater than 100 not allowed.' (or the other message for the other element) forever whenever an input is invalid. Insert else statements (if there is no rangeOverflow or no patternMismatch) that call setCustomValidity with the empty string to clear the error messages, in case any exist when the button is clicked:

const fp = document.getElementById('quantity');
const ide = document.getElementById('ide_pref');

fp.addEventListener('input', e => {
  if (fp.validity.rangeOverflow) {
    fp.setCustomValidity('Custom message: greater than 100 not allowed.');
  } else {
    fp.setCustomValidity('');
  }
});

ide.addEventListener('input', e => {
  if (ide.validity.patternMismatch) {
    ide.setCustomValidity('enter exactly webstorm OR vscode');
  } else {
    ide.setCustomValidity('');
  }
})

.u {
  margin-bottom: 15px;
}

.u:invalid {
  border: 2px solid orangered;
}

.u:valid {
  border: 2px solid greenyellow;
}

.btn {
  border: none;
  padding: 10px;
  border-radius: 8px;
  margin-top: 10px;
}

:focus {
  outline-color: gray;
}

<form action="#" method="get">
  <div>
    <label for="ide_pref">Would you prefer webstorm or vscode?</label>
    <input required class="u" type="text" pattern="webstorm|vscode" id="ide_pref" name="ide_pref"><br>
    <label for="quantity">How many licences would you like?</label>
    <input required class="u" type="number" min="1" max="100" id="quantity" name="lic_quantity"><br>
    <button class="btn" type="submit">Submit</button>
  </div>
</form>

There are plenty of form validation tutorials out there to give you further inspiration.

This version makes use of data attributes and is very scalable without the need for more javascript. More work will be needed for additional input types but should be enough to get you started.

//Set valudation on blur for each of the elements
document.querySelectorAll("[data-customvalidate] input").forEach(function(element) {
  element.addEventListener("blur", function() {
    validateField(this)
  });
});


//Set form validation
document.querySelectorAll("[data-customvalidate").forEach(function(element) {
  element.addEventListener("submit", function(event) {
    let isNotValid = false;
    //Go through each of the input element
    this.querySelectorAll("input").forEach(function(input) {
      //Validate the input and set the isNotValid flg
      if (validateField(input) && !isNotValid) {
        isNotValid = true;
      }
    });

    //Stop the form submit if not valid
    if (isNotValid) {    
      event.preventDefault();
    }
  });
});


//Main Validation Funtion
function validateField(field) {
  let attributes = field.getAttributeNames();
  let parent = field.parentNode
  let errorField = parent.querySelector(".formError");

  let isError = false;
  //Required Vlidation
  if (attributes.includes("required") && field.value === "") {
    errorField.textContent = `The ${field.dataset.errorfieldname} field is required`;
    isError = true;
    //Min Length Validation
  } else if (attributes.includes("minlength") && (field.value.length < field.getAttribute("minlength"))) {
    errorField.textContent = `The mininmum length for ${field.dataset.errorfieldname} field is ${field.getAttribute("minlength")} characters`;
    isError = true;
    //Match Validation
  } else if (attributes.includes("data-mustmatch")) {
    let elementToMatch = document.getElementById(field.dataset.mustmatch);
    if (elementToMatch.value !== field.value) {
      errorField.textContent = `The ${elementToMatch.dataset.errorfieldname} and ${field.dataset.errorfieldname} do not match`;
      isError = true;
    }
  }

  parent.classList.toggle("error", isError);
  return isError;
}

label {
  display: block;
}

label:not(.error)>.formError {
  display: none;
}

label>.formError {
  color: red;
  font-weight: bold;
  padding-left: 1em;
}

<form novalidate data-customvalidate>
  <label for="password">
         <input type="password" name="password" id="password" placeholder="Password*" required minlength="8" data-errorfieldname="Password" />
         <span class="formError"></span>
      </label>
  <label for="confirmpassword">
        <input type="password" name="confirm_password" id="confirm_password" placeholder=" Confirm password*" required minlength="8" data-errorfieldname="Confirm Password" data-mustmatch="password" data-mustmatcherror= "Password and Confirm Password do not match" />
        <span class="formError"></span>
      </label>
  <button>Submit</button>
</form>