Проверка нескольких полей в форме - Javascript

Question

Я пытаюсь проверить три поля в моей форме. Я написал код для них и думал, что они будут работать. Единственная проблема, с которой я столкнулся, заключается в том, что они не сделаны в последовательности. Если я отправляю форму, ничего не заполняя, она получает подтверждение по электронной почте. Если я ввожу имя, снова пропускаю проверку имени и фамилии и переходит прямо к электронной почте. Я попытался сделать так, чтобы это работало в последовательности, поэтому сначала имя, затем фамилия и адрес электронной почты. Любая помощь будет оценена.

JS

        function validateForm() {
            var fname = document.forms["buyProductForm"]["fname"].value;
            if (fname == "") {
                alert("Firstname must be filled out");
                return false;
            }
        }
        function validateForm() {
            var sname = document.forms["buyProductForm"]["sname"].value;
            if (sname == "") {
                alert("Surname must be filled out");
                return false;
            }
        }
        function validateForm() { 
            var email = document.forms["buyProductForm"]["email"].value;
            if (email == "") {
                alert("Email must be filled out");
                return false;
            }
        } 

HTML

<form name="buyProductForm" onsubmit="return validateForm()" method="post">
        <fieldset id="field1">
        <legend>Personal Details</legend>


        <label for="name">Firstname:</label>
        <input type="text" name="fname" placeholder="Enter your first name" ><br>

        <label for="name">Surname:</label>
        <input type="text" name="sname" placeholder="Enter your surname"><br>

        <label for="email">Email Adress:</label>
        <input type="email" name="email" placeholder="Enter your email" ><br>

Answer 1

Jsut создает только одну функцию validateForm() и внутри этой функции проверяет все ваши поля.

function validateForm() {
	var fname = document.forms["buyProductForm"]["fname"].value;
	if (fname == "") {
		alert("Firstname must be filled out");
		return false;
	}
	 var sname = document.forms["buyProductForm"]["sname"].value;
	if (sname == "") {
		alert("Surname must be filled out");
		return false;
	}
	var email = document.forms["buyProductForm"]["email"].value;
	if (email == "") {
		alert("Email must be filled out");
		return false;
	}
}

<form name="buyProductForm" onsubmit="return validateForm()" method="post">
    <fieldset id="field1">
    <legend>Personal Details</legend>

    <label for="name">Firstname:</label>
    <input type="text" name="fname" placeholder="Enter your first name" ><br>

    <label for="name">Surname:</label>
    <input type="text" name="sname" placeholder="Enter your surname"><br>

    <label for="email">Email Adress:</label>
    <input type="email" name="email" placeholder="Enter your email" ><br>
    <input type="submit" value="Submit">
</form>

Answer 2

function validateForm() {
        var fname = document.forms["buyProductForm"]["fname"].value;
        if (fname == "") {
            alert("Firstname must be filled out");
            return false;
        }

        var sname = document.forms["buyProductForm"]["sname"].value;
        if (sname == "") {
            alert("Surname must be filled out");
            return false;
        }

        var email = document.forms["buyProductForm"]["email"].value;
        if (email == "") {
            alert("Email must be filled out");
            return false;
        }
    }