I am a complete newbie when it comes to javascript. Its a requirement suddenly that I have to do because of using Microsoft power pages.

I mainly use chatgpt or copilot to help me get through stuff but this time it seems like a blocker.

I have a form and I created a function named submitForm(event) which has event.preventDefault()

the problem is that whenever a required field doesnt have an input and the form was submitted , the span should show or the "error label" should show below the field but its currently not. Another problem is that the alert is not showing however when I tested it using the console it sends out alerts so I also dont know whats the problem causing this.

Please see codes below.

function:

function submitForm(event) {
event.preventDefault(); // Prevent the default form submission

// Validate the form
var form = document.querySelector("form");

form.querySelectorAll('input[required], select[required]').forEach(function(input) {
    var errorSpan = input.nextElementSibling;

    if (!input.value) {
        errorSpan.style.display = 'inline';
        valid = false;
    } else {
        errorSpan.style.display = 'none';
    }
});


if (!form.checkValidity()) {
    alert("Please fill out all required fields.");
    return;
}
}
function toggleAnonymous() {
var anonymous = document.getElementById("anonymous_no").checked;
var fullNameField = document.getElementById("full_name");
var emailField = document.getElementById("email");

fullNameField.style.display = anonymous ? "block" : "none";
emailField.style.display = anonymous ? "block" : "none";

if (anonymous) {
    fullNameField.setAttribute("required", "required");
    emailField.setAttribute("required", "required");

    // Add error spans if not already present
    if (!fullNameField.querySelector('.error')) {
        var errorSpanFullName = document.createElement('span');
        errorSpanFullName.className = 'error';
        errorSpanFullName.style.color = 'red';
        errorSpanFullName.style.display = 'none';
        errorSpanFullName.textContent = 'This field is required';
        fullNameField.appendChild(errorSpanFullName);
    }

    if (!emailField.querySelector('.error')) {
        var errorSpanEmail = document.createElement('span');
        errorSpanEmail.className = 'error';
        errorSpanEmail.style.color = 'red';
        errorSpanEmail.style.display = 'none';
        errorSpanEmail.textContent = 'This field is required';
        emailField.appendChild(errorSpanEmail);
    }
} else {
    fullNameField.removeAttribute("required");
    emailField.removeAttribute("required");

    // Remove error spans
    var errorSpanFullName = fullNameField.querySelector('.error');
    if (errorSpanFullName) {
        fullNameField.removeChild(errorSpanFullName);
    }

    var errorSpanEmail = emailField.querySelector('.error');
    if (errorSpanEmail) {
        emailField.removeChild(errorSpanEmail);
    }
}

}

FORM:

<form id="wForm" onsubmit="submitForm(event)">
<label>Do you want to state your name or wish to remain anonymous?</label>
<input type="radio" id="anonymous_yes" name="anonymous" value="yes" onclick="toggleAnonymous()" required> Yes, I want to state my name<br>
<input type="radio" id="anonymous_no" name="anonymous" value="no" onclick="toggleAnonymous()"> No, I wish to remain anonymous<br>

<span class="error" style="color:red; display:none;">This field is required</span>

<div id="full_name" style="display:none;">
    <label>Full Name:</label>
    <input type="text" name="full_name"><br>
</div>

<div id="email" style="display:none;">
    <label>Email:</label>
    <input type="email" name="email"><br>
</div>
<input type="submit" value="Submit" style="margin-top: 20px;">
</form>

What seems to be the problem I am having?

EDIT: I was under the impression that radio buttons only need 1 to be set to required if its under the same "name" as I was also skeptical why it should require both the radio buttons to be required.