JSFiddle - React, Tailwind, and code Playground

HTML

<div class="error-messages" style="display:none;"></div>

<p>
<form action="www.superwebsite.com" method="post" id="form">
    <p>
        <label>Naam</label><br />
        <input id="naam" type="text" />
    </p>
    <p>
        <label>Email</label><br />
        <input id="email" type="email" />
    </p>
    <p>
        <input type="submit" value="Subscribe"/>
    </p>
</form>
</p>

JavaScript

function isValid(fldId,len) {
   var fld = $("#"+fldId);
   var val = fld.val();
    window.console && console.log(fld,fldId)
   if (val == "" || (len && val.length<len)) {
      fld.css("borderColor","red");
      return false;
   }      
   fld.css("borderColor","black");
   return true;
}

$(function() {
  $("form").on("submit",function() {
    var errormessage = [];

    if (!isValid('naam', 10)) {
      errormessage.push("You forgot to fill in your name ");
    }
    if (!isValid('email')) {
      errormessage.push("You forgot to fill in your email ");
    }
    
    if (errormessage.length>0) {
      window.console && console.log("error present");
      $(".error-messages").html(errormessage.join('<br/>')).fadeIn();
      return false;
    }
    window.console && console.log("success");
    return true;
  });
});