Hello there, although being new to the forum I intend to start using it quite a lot after seeing how busy and active it is!

I will be as thorough as I can in my explanation below, if anything is unclear then please let me know!

OK, basically I am creating a form with the fields to input - first-name, surname, phone number and email. I have a simple form wrote up, completely unstyled and plain which you shall see below. What I need to do is for the phone number and email address fields, is to validate whether the correct string is in the fields (numbers/amount of numbers for phone number and whether the email address is valid)

Now of course I have looked over the internet and found numerous tutorials and code examples for validation but trying to pick and choose and then incorporate others code with your own is hard; and I couldn't find anything that helps me exactly. (you will see below that I have a small form of simple validation, but it is not what I want)). What you will see in my code below is that I have a single function that is called with the submit button that checks to see if the telephone has only numbers in the field. This works however it has lead me onto my next point.

When I click the submit button, I want both the email and phone number checked for validation; but rather than having a pop-up alert message, I would like the errors displayed below the field that they correspond with. So, to put it simply, could someone help/show me to how to write the correct function/functions to check both the fields (on the click of submit) and if one/either are wrong, then an error message is displayed below the field.

Just to mention, I am a total novice to JavaScript, and most of my code and has been referenced from tutorials and stuff.

Code to follow:

HTML Form.

Code:
<form  name="clientValidate" id="custInfo" autocomplete="on";">
   <fieldset>
      <legend>Required Customer Information</legend>
      
         <label>First Name:
            <input id="firstName" name="name" type="text"
                     placeholder="Forename" autofocus>
         </label>
         
         <label>Surname:
            <input id="Surname" name="sName" type="text"
                     placeholder="Surname">
         </label>
         
         <label>Telephone:
            <input id="tel" name="telephoneNum" type="tel" 
                     placeholder="07123456789">
         </label>
         
         <label>Email Address:
            <input id="emailer" name="email" type="email"
                     placeholder="E.G email@email.com">
         </label>
      
   </fieldset>
   <input type="button" onclick="isNumeric(document.getElementById('tel'), 'Numbers Only Please')" value="Submit!"/>   
</form>
Current JS

Code:
function isNumeric(elem, helperMsg){
   var numericExpression = /^[0-9]+$/;
   if(elem.value.match(numericExpression)){
      return true;
   }else{
      alert(helperMsg);
      elem.focus();
      return false;
   }
}
Thanks in advance, and I will keep a check on the thread