Input couleur Champs Form. js

Bonjour tout le monde!

Je cherche désespérément un bon script js pour vérifié les champs obligatoire de mon formulaire.
Mon formulaire renvoie ses données vers une page php qui enverra tout çà par mail.

ce que j'aimerai avec javascript, c'est qu'il vérifie les champs obligatoires ( une deuxième vérification est en place dans ma page php)
avant l'envoie. le formulaire sera envoyé vers php uniquement si les champs obligatoires sont valides.

J'aimerais également que mon input du champs obligatoire non rempli devient par exemple rouge ou un bord de contour rouge.
mon formulaire étant très long, je vous mets un modèle basique de ce que j'ai afin que vous puissez m'éclairer si possible
en me donnant un modèle de script que je pourrais donc adapté.

Exemple:

<form method="post" action="mail/send_mail.php" id="contact_form" >
  <fieldset>
  <legend> Vous êtes </legend>
  <div>
      <label for="Nom">Nom:</label>
      <input type="text" name="Nom" id="Nom" />
  </div>
  <div>
      <label for="Prenom">Prénom:</label>
      <input type="text" name="Prénom" id="Prénom" />
  </div>
  <div>
     <p><input type="radio" id="male" name="type" value="male" checked="checked" />
        <label for="male">Vous êtes un homme</label></p>
     <p><input type="radio" id="female" name="type" value="female" />
        <label for="female">Vous êtes une femme </label></p>
     <p><input type="radio" id="none" name="type" value="none" />
        <label for="none">Je préfère ne rien dire </label></p>
  </div>
  </fieldset>
  <fieldset>
  <legend>vous avez</legend>
  <div>
      <label for="age">Vous êtes âgé(e) de</label>	
      <select name="age" id="age" size="1">
        <option value="15 ans">15 ans</option>
        <option value="16 ans">16 ans</option>
        <option value="17 ans">17 ans</option>
        <option value="18 ans">18 ans</option>
        <option value="19 ans">19 ans</option>
        <option value="20 ans">20 ans</option>
      </select>
  </div>
  <div>
  <label for="description"> Décrivez vous</label>
  <textarea name="description" id="description" rows="5" cols="50">Votre texte  ici</textarea> 
  </fieldset>
  <input type="submit" value="envoyer!" />
  <input type="reset" value="réinitialiser" />
<form>

Voilà dans mon formulaire j'ai au moins un élément de chaque que celui présenté ci-dessus.

j'ai vu dans mes recherches qu'on devait ajouter onSubmit="return verif_champs()" par exemple, au niveau de la balise form mais ca ne m'arrange pas car en html strict ca met directement une erreur, une autre solution ?

exemple de script que l'on m'a proposé:

function isEmpty(id_text_field) {
    return (document.getElementById(id_text_field).value == '');
	
}
function verif_champs() {
    return (!isEmpty('Nom') && !isEmpty('Prenom'));
			

}
window.onload = function() {
    document.getElementById('contact_form').onsubmit = verif_champs;

};

Avec cela, ma page n'envoie rien tant que je ne remplis pas mes champs indiqué ( pour l instant nom et prenom) Seulement voilà, je ne sais pas quoi mettre ni où placé un code pour qu'il m'affiche une erreur quand c'est vide, et comment le champs nom et prénom deviendrait rouge ou encadré rouge pour signaler que c est ce champs qu'il faut vérifier.
Que faire lorsqu'il s'agit de textarea et des sélectes ? car radio n'est jamais "vide" mais s'il faut faire quelque chose, j'écoute...
Je précise que je ne connais vraiment rien en javascript

Merci de votre aide, j'espère que je suis resté compréhensible