Hello Funmilola Akanbi
A very good attempt and well done on completing the project (that's half the battle). The design matches well. I have a few suggestions that may help with the Javascript side.
1. Novalidate to use JavaScript to validate your form
In order to use JavaScript to validate your form, you will need to disable default validation api using the novalidate attribute on the form, this could look similar to this.
<form class="contact" novalidate></form>
2. Error wont display as form-group does not exist
If you press 'f12' and look at dev tools console, you can see an error that points towards this piece of code in your JavaScript.
input.closest('.form-group')?.appendChild(errorMessage);
This is because your code to display errors relies on a parent having a class of form-group, but not all of your inputs have a parent with this class. For example.
<div class="radio-group">
<div class="radio-option">
<label for="general"><input type="radio" id="general" name="query" value="general">General Enquiry</label>
</div>
<div class="radio-option">
<label for="support"><input type="radio" id="support" name="query" value="support">Support Request</label>
</div>
</div>
No form-group class, you use radio-group instead, so no errors will be displayed for this.
<div class="name">
<div class="firstname">
<label for="first-name">First Name *</label>
<input type="text" id="first-name" name="first-name" required="">
</div>
<div class="lastname">
<label for="last-name">Last Name *</label>
<input type="text" id="last-name" name="last-name" required="">
</div>
</div>
Also no form-group, so errors wont display here either.
3. Typo made (Query vs Query-Type)
Next, you seem to have made a typo when selecting your radio buttons by mistakenly targeting query-type instead of query.
This is your JS
const queryType = document.querySelector('input[name="query-type"]:checked');
if (!queryType) {
isValid = false;
showError(
document.querySelector('input[name="query-type"]'),
'Please select a query type'
);
}
This is your HTML
<input type="radio" id="general" name="query" value="general">
Hope this helps and good luck on your next project!
