JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<body>

  <input size="15" type="text" name="Full_Name" placeholder='No Numbers' value="" onblur="validateNotNumber( this.value, 'nameError' )" />
  <p> <span id="nameError" class="errorMessage"></span> </p>


  <input size="15" type="text" name="Full_Name2" placeholder='No Letters' value="" onblur="validateNotLetter( this.value, 'nameError2' )" />
  <p> <span id="nameError2" class="errorMessage"></span> </p>

</body>

JavaScript

window.validateNotEmpty = validateNotEmpty;
 window.validateNotNumber = validateNotNumber;
 window.validateNotLetter = validateNotLetter;


 function validateNotNumber(input, id) {

   var errorDisplay = document.getElementById(id);

   var value = input || '';

   var containsANumberRegEx = /\d+/i;
   debugger
   var containsANumber = containsANumberRegEx.test(value);
   if (containsANumber) {
     errorDisplay.innerHTML = "Sorry, this section can not have numbers";
   } else {
     errorDisplay.innerHTML = "";
   }


   return containsANumber;
 }



 function validateNotLetter(input, id) {
   var errorDisplay = document.getElementById(id);

   var value = input || '';

   var letterRegex = /\D+/i;
   var hasALetter = letterRegex.test(value);
   if (hasALetter) {
     errorDisplay.innerHTML = "Sorry, this section can not have letter";;
   } else {
     errorDisplay.innerHTML = "";
   }

   return notLetter;
 }
 
 
  function validateNotEmpty(input, id) {

   var errorDisplay = document.getElementById(id);
   var notEmpty;
   if (input == "") // check if input is empty
   {
     errorDisplay.innerHTML = "This is a requiered field";
     notEmpty = false; // update return value
   } // end if
   else {
     errorDisplay.innerHTML = ""; // clear the error area
     notEmpty = true; // update return value
   } // end else

   return notEmpty; // return whether the input is empty

 } // end function validateNotEmpty