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 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

 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;
     }