После нажатия кнопки отправки вы можете выполнить итерацию по всем полям ввода, определить, имеют ли они атрибут required, а затем определить, является ли их значение пустой строкой (!field.value)
Мы помещаем это в блок try/catch, чтобы, если поле было required и не имело значения, мы могли выйти из цикла forEach, выдав ошибку и отобразив сообщение Please Enter All Required Fields
let submit = document.querySelector("button");
submit.addEventListener("click", submitFn);
function submitFn() {
try {
document.querySelectorAll("form input").forEach(function(field) {
if (field.hasAttribute("required") && !field.value) {
throw error("not all fields filled in");
}
});
alert("all required fields filled in!")
} catch {
alert("please enter all required fields");
}
}
<form>
<label>first name </label><input required/>
<br/>
<label>last name</label><input required/>
<br/>
<label>email ( not required )</label><input />
<hr>
<button type="button">submit</button>
</form>
Примечание: Было бы лучше, если бы вы изменили тип кнопки отправки на submit и изменили событие с вышеуказанного кода с click на submit, но я не знаю, была ли причина для вашей разметки или нет, поэтому я оставляю это на ваше усмотрение.