JSFiddle - React, Tailwind, and code Playground

by pascal08

HTML

<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />
<input type="text" data-type="attribute" /><br />

CSS

input.active {
    background-color: red;
}

JavaScript

$(function () {  
    $('input[data-type="attribute"]').on('change', function() {
      if( /[^a-zA-Z0-9]/.test( $(this).val() ) === true ) {
        $(this).val('');
      } else {
          console.log('goed'); 
          //run code   
      }
      ($(this).val() != '') ? $(this).addClass('active') : $(this).removeClass('active');
    });
  });