JSFiddle - React, Tailwind, and code Playground

HTML

<section class="content formValidation">
  <form action="#0">
    <div>
      <label class="label--block label--whitespace" for="username_new">username</label>
      <input type="text" id="username_new" name="username" maxlength="50" placeholder="username" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{2,20}$" required="required">
      <div class="info info--form requirements">at least 3 chars; only A-Z, a-z and numbers</div>
    </div>
    
    <div>
      <label for="screen_name_new" class="fieldLabel">your name</label>
      <input type="text" id="screen_name_new" name="screen_name" maxlength="50" placeholder="your name" required="required">
    </div>
    
    <div>
      <label class="label--block label--whitespace" for="email_new">e-mail</label>
      <input type="email" id="email_new" name="email" maxlength="50" placeholder="valid E-Mail" required="required">
      <div class="info info--form requirements">has to be valid e-mail.</div>
    </div>
    
    <div>
      <label class="label--block label--whitespace" for="password_new">Passwort</label>
      <input type="password" id="password_new" name="password" maxlength="50" placeholder="Dein gewünschtes Passw●●●" required="required">
    </div>
    
    <div>
      <label class="label--block label--whitespace" for="password_confirm_new">Passwort bestätigen</label>
      <input type="password" id="password_confirm_new" name="password_confirm" maxlength="50" placeholder="Nochmals dein Passw●●●" required="required">
    </div>

    <input type="submit" class="button button--large button--fullwidth" value="Sign Up" />
  </form>
</section>

CSS

.formValidation form input[type="text"],
.formValidation form input[type="email"],
.formValidation form input[type="password"] {}
.formValidation form input[type="text"]:valid,
.formValidation form input[type="email"]:valid,
.formValidation form input[type="password"]:valid {background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/check.svg);background-size:1rem;background-repeat:no-repeat;background-position:right .5rem center}
.formValidation form input[type="text"]:invalid:not(:focus):not(:placeholder-shown),
.formValidation form input[type="email"]:invalid:not(:focus):not(:placeholder-shown),
.formValidation form input[type="password"]:invalid:not(:focus):not(:placeholder-shown) {border-color:rgb(161,0,0);background:rgba(161,0,0,.05)}
.formValidation form input[type="text"]:invalid:not(:focus):not(:placeholder-shown) + label,
.formValidation form input[type="email"]:invalid:not(:focus):not(:placeholder-shown) + label,
.formValidation form input[type="password"]:invalid:not(:focus):not(:placeholder-shown) + label {opacity:0;}
.formValidation form input[type="text"]:invalid:focus:not(:placeholder-shown) ~ .requirements,
.formValidation form input[type="email"]:invalid:focus:not(:placeholder-shown) ~ .requirements,
.formValidation form input[type="password"]:invalid:focus:not(:placeholder-shown) ~ .requirements {max-height:12rem;padding:0 1rem 1rem 1rem;}
.formValidation form .requirements {padding:0 1rem 0 1rem;max-height:0;-webkit-transition:.3s;transition:.3s;overflow:hidden;color:rgb(161,0,0)}

JavaScript

$('.formValidation input[type=submit]').on('click',function(e){
      e.preventDefault();
      var res = $('.formValidation input[type=text],.formValidation input[type=email],.formValidation input[type=url],.formValidation input[type=password]').toArray().some(function(el){
        return $(el).css('border-color') === 'rgb(161,0,0)'
        console.log( $(el).css('border-color') === 'rgb(161,0,0)' );
      });
      if (res) {
        console.log('FEHLER!');
        alert('Das Formular enthält noch ungültige Angaben.');
      } else {
        console.log('GO FOR IT!');
        $(this).submit();
      }
    });