JSFiddle - React, Tailwind, and code Playground

HTML

<table>  

  <tr>
    <td><b>Year-month:</b></td>
    <td>
      <input class="input"                
             type="text"                    
             name="ym"                        
             id="ym"                    
             maxlength="7"                  
             size="10"                      
             pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2]))" 
             placeholder="yyyy-mm"/>
    </td>
    <td><b>Lot:</b></td>
    <td>
      <input class="input"                       
             type="text"                          
             name="lot"                             
             id="lot"                          
             maxlength="1"                         
             size="10"                             
             pattern="[1-7]{1}"           
             placeholder="Lot" />
    </td>
  </tr>
  <tr>
    <td><b>Page-no:</b></td>
    <td>
      <input class="input"                    
             type="text"          
             name="pn"  
             id="pn"                        
             maxlength="5"              
             size="10"    
             pattern="[0-9]{5}"         
             placeholder="Page Number"/>
    </td>
    <td><b>Page-Total:</b></td>
    <td>
      <input class="input"             
             type="text" 
             name="pt"                     
             id="pt"                 
             maxlength="5"               
             size="10"                   
             pattern="[0-9]{2}"  
             placeholder="Page Total" />
    </td>
  </tr>
</table>

CSS

.input:valid {
  background:initial;
}

.input:invalid {
  background:#F3BBBB;
}

JavaScript

$(document).ready(function(){
$('input[type=text]').keyup(function() {
this.val("invalid")
});

});