I'm having trouble displaying the "required" span text when a user fails to meet the field requirements in my code. It's not functioning correctly. Any idea what could be causing this issue?
function validate() {
var spans = document.getElementsByTagName("span");
var fname = document.registration.fname;
if (fname.value === "") {
spans[0].style.visibility = "visible";
} else {
spans[0].setAttribute("style", "visibility:hidden");
}
}<form name='registration' align='center'>
<fieldset name='registration' class='fieldset-auto-width'>
<div>
<label for='fname'><b>FirstName:</b>
</label>
<input type='text' name='fname' placeholder='Enter First Name' value='' required='required' />
<span id='errfn' class='error'> required</span>
</div>
<input type='button' value='Submit' onclick='validate();' />
</fieldset>
</form>