JSFiddle - React, Tailwind, and code Playground

HTML

<?php
/*
  Plugin Name: User Registration
  Plugin URI: https://github/nelo4x/wordpresszhaw
  Description: Let User registrate on the site and allow them to order products.
  Version: 1.5
  Author: Nelo Lourenço Correia
  Author URI: https://github/nelo4x/wordpresszhaw
 */
  
function registration_form( $username, $password, $email, $first_name, $last_name, $nickname, $address ) {
	 echo '
    <style>
    div {
        margin-bottom:2px;
    }
     
    input{
        margin-bottom:4px;
    }
    </style>
    ';
    
    echo '
    <form action="' . $_SERVER['REQUEST_URI'] . '" method="post">
	<div>
		<label for="username">Benutzername (*) <br /></label>
		<input type="text" id="registration_username" name="username" value="' . (isset($_POST['username']) ? $username : null) .  '" size="30"></input>
		<span class="regerror">Geben sie einen Benutzernamen ein</span>
	</div>
	
	<div>
		<label for="email">Email (*) <br /></label>
		<input type="text" id="registration_email" name="email" value="' . (isset($_POST['email']) ? $email : null) . '"size="30"></input>
		<span class="regerror">Geben sie eine gültige E-Mail Adresse ein</span>  
	</div>
	
	<div>
		<label for="password">Passwort (*) <br /></label>
		<input type="password" id="registration_password" name="password" value="' . (isset($_POST['password']) ? $password : null) . '"size="30"></input>
		<span class="regerror">Das Passwort muss mindestens 5 Zeichen haben</span> 
	</div>
	
	<div>
		<label for="firstname">Vorname <br /></label>
		<input type="text" name="fname" value="' . (isset($_POST['fname']) ? $first_name : null) . '"size="30"></input>
	</div>
	
	<div>
		<label for="lastname">Nachname <br /></label>
		<input type="text"  name="lname" value="' . (isset($_POST['lname']) ? $last_name : null) . '"size="30"></input>
	</div>
	
	<div>
		<label for="nickname">Nickname<br /></label>
		<input type="text" name="nickname" value="' . (isset($_POST['nickname']) ? $nickname : null) ....

CSS

.regerror{    
	display: none;   
	 margin-left: 10px;	
	}
	.regerror_show{    
	color: red;
    	margin-left: 10px;	
	}
	/*Boxen Färben*/
	input.invalid, textarea.invalid{    
	border: 2px solid red;
	} 
	input.valid, textarea.valid{    
	border: 2px solid green;	
	}

JavaScript

//jQuery Validierung
jQuery(document).ready(function() {
	//Benutzername kann nicht leer sein
	jQuery('#registration_username').on('input', function() {
		var input=jQuery(this);
		var is_username=input.val();
		if(is_username){input.removeClass("invalid").addClass("valid");}
		else{input.removeClass("valid").addClass("invalid");}
	});
});

jQuery(document).ready(function() {
	//Muss eine Gültige E-Mail sein 
	jQuery('#registration_email').on('input', function() {
		var input=jQuery(this);
		var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
		var is_email=re.test(input.val());
		if(is_email){input.removeClass("invalid").addClass("valid");}
		else{input.removeClass("valid").addClass("invalid");}
	});
});

jQuery(document).ready(function() {
	//Passwort darf nicht leer sein
	jQuery('#registration_password').on('input', function() {
		var input=jQuery(this);
		var is_password=input.val();
		if(is_password){input.removeClass("invalid").addClass("valid");}
		else{input.removeClass("valid").addClass("invalid");}
	});
});


jQuery(document).ready(function() {
	// Text Anzeigen wenn Submit gedrückt wird und Fehler vorhanden sind
	jQuery("#registration_submit button").click(function(event){
	});
});

jQuery(document).ready(function() {
	//Loop zu jedem Input-Feld, um die Fehler mit CSS zu vergleichen (valid)
jQuery("#registration_submit button").click(function(event){
    var form_data=jQuery("#registration").serializeArray();
    var regerror_free=true;
    for (var input in form_data){
        var element=jQuery("#registration_"+form_data[input]['name']);
        var valid=element.hasClass("valid");
        var regerror_element=jQuery("span", element.parent());
        if (!valid){regerror_element.removeClass("regerror").addClass("regerror_show"); error_free=false;}
        else{regerror_element.removeClass("regerror_show").addClass("regerror");}
    }
    if (!regerror_free){
        event.preventDefault();
    }
    else{
       ...