$label1 = set_label(validation_errors('username'), 'Username/Email');
echo form_label($label1, array('for' => 'username', 'class' => 'dark-text'));

<?php
// This function returns the value (label or error message) to be used as the label.
function set_label($error, $label) {
if (($error === null) || ($error === "")) {
return $label;
}
$error = str_replace("&#9679;", "&#128939;", $error);
$error = str_replace(" The", "", $error);
$error = str_replace(" field", "", $error);
$error = str_replace(" long", "", $error);
$error = str_replace("must be at least ", "minimum ", $error);
$error = str_replace("characters", "chars", $error);
return $error;
}
?>
<script>
window.onload=function() {
var inputs = document.getElementsByTagName('input');
for (let input of inputs) {
// if the field is blank, set the input field to focus and add an error class.
if ((input.value == null) || (input.value == '' )) {
input.focus();
input.className += "error";
return;
}
// if the input field is not blank, check to see if there is an associated error.
var labels = document.getElementsByTagName('label');
for (let label of labels) {
if((label.htmlFor == input.id) && (label.innerHTML.includes('validation-error-report'))) {
input.focus();
input.className += "error";
return;
}
}
}
};
</script>

<script>
window.onload=function() {
var inputs = document.getElementsByTagName('input');
for (let input of inputs) {
// for each input filed, see if there is an associated error.
var labels = document.getElementsByTagName('label');
for (let label of labels) {
alert(label.innerHTML);
if((label.htmlFor == input.id) && (label.innerHTML.includes('validation-error-report'))) {
input.focus();
input.className += "error";
return;
}
}
}
};
</script>

window.onload = function() {

```
const invalid = document.querySelector('input:invalid');

if (invalid) {
invalid.focus();
invalid.classList.add('error');
}
```

};

<input type="text" id="username" name="username" required>