JSFiddle - React, Tailwind, and code Playground

HTML

<script>
function submitForm(){
var formValid = false;
var msg = "";
var fNameElement = document.getElementById("fName");
if(fNameElement){
	var fNameValue = fNameElement.value;
  if(fNameValue.length < 2){
  	msg = "We expect your input should contain at least 2 characters, darling !";
  }
  else if(!(/^[a-zA-Z]+$/.test(fNameValue))){
  	msg = "Please, enter only characters";
  }
  else{
  	formValid = true;
  }
  if(formValid){
    fNameElement.style.borderColor="green";
    //do something
  }
  else{
    fNameElement.style.borderColor="red";
    alert(msg); // or show it in a div
  }
}
}
</script>
<form id="signUp" action="javascript:submitForm()">
    <input type="text" id="fName" name="firstname" placeholder="First name"> 
    <input type="checkbox" name="result"  required  autofocus> Agree our conditions
    <input type="submit" id='subMit' value="SUBMIT">
 </form>