Ok so I seem to have gotten it right now…
Here the JS
<script>
function myFormFunction()
{
if (document.myForm.Name.value == "")
{
var el1 = document.getElementById("name");
el1.style.display = "block";
document.myForm.Name.focus();
return false;
}
if (document.myForm.Surname.value == "")
{
var el2 = document.getElementById("surname");
el2.style.display = "block";
document.myForm.Surname.focus();
return false;
}
if (document.myForm.Income.value == "")
{
var el3 = document.getElementById("income");
el3.style.display = "block";
document.myForm.Income.focus();
return false;
}
return (true) ;
}
</script>
And here the modified form
<form name="myForm" onSubmit="return myFormFunction()" method="post">
<h3>Work Out Your Budget</h3>
<p><h4>Personal Details:</h4></p>
<p> Name: <input type="text" name="Name">
<div id="name" style="display:none">Please enter your name</div></p>
<p> Surname: <input type="text" name="Surname">
<div id="surname" style="display:none">Please enter your surname</div></p>
<p> Income: <input type="text" name="Income">
<div id="income" style="display:none">Please enter your income</div></p>
<br>
<p><h4>What are your monthly expenses?</h4></p>
<p><input type="checkbox" name="Groceries">Groceries</input></p>
<p><input type="checkbox" name="Car">Car</input></p>
<p><input type="checkbox" name="PublicTransport">Public Transport</input></p>
<p><input type="checkbox" name="Rent">Rent</input></p>
<p><input type="checkbox" name="Pets">Pets</input></p>
<p><input type="checkbox" name="Drinking">Drinking</input></p>
<p><input type="checkbox" name="Smoking">Smoking</input></p>
<p><input type="checkbox" name="NightsOut">Night's Out</input></p>
<p><button type="Submit" value="Submit">Submit</Button></p>
</form>
solved want text displayed instead of alert when validation occurs