JSFiddle - React, Tailwind, and code Playground

HTML

<!--<form name="RegisterForm" action="RegConfirm.php" method="post" onSubmit="return Register()">            

                <p><input type="text" name="txtURL" id="txtURL"></p>

                <p><input type="submit" value="Register"></p>                                      
        </form>
-->

<form action="RegConfirm.php" class="sign-up-form" method="post" onSubmit="return Register()">
    
    <h2 class="title">Sign up</h2>
    <div class="input-field">
      <i class="fas fa-user"></i>
      <input type="text" name="Username" placeholder="Username" id = "user" class = "text-danger"/>
    </div>
    
    <br>

    <div class="input-field">
      <i class="fas fa-envelope"></i>
      <input type="email" name="email" placeholder="Email" id = "emailAddress" class = "text-danger"/>
    </div>

    <br>

    <div class="input-field">
      <i class="fas fa-lock"></i>
      <input type="password" name="Password"  placeholder="Password" id = "pass" class = "text-danger"/>
    </div>

    <br>

    <input type="submit" class="btn" value="Sign up" />
</form>

JavaScript

function Register() 
{
   	return validation();      
}

function validation() 
{

      var user = document.getElementById('user').value;
      var emailAddress = document.getElementById('emailAddress').value;
      var pass = document.getElementById('pass').value;

      console.log(user)
      if (user == null || user == "")
			{ 
				alert ("Username cannot be empty");					
		  			return false;  
			}
			else if(user.length < 3 || user.length > 30)
			{  
				alert ("Username must be at least 3 characters long.");  
			  	return false;  
			}
			else
			{
				document.getElementById('user').innerHTMl = "";
			}


      console.log(emailAddress)
      if (emailAddress == null || emailAddress == "")
			{ 
				alert ("Email cannot be empty");					
		  		return false;  
			}
			else if(emailAddress.indexOf('@') <= 0)
			{  
				alert (" @ symbol is on invalid position");  
			  return false;  
			}
			else
			{
				document.getElementById('emailAddress').innerHTMl = "";
			}
      

      console.log(pass)
      if (pass == null || pass == "")
			{ 
				alert ("Password cannot be empty");					
		  		return false;  
			}
			else if(pass.length <= 4 || pass.length >= 20)
			{  
				alert ("Password must be at least 4 characters long.");  
			  return false;  
			}
			else
			{
				document.getElementById('pass').innerHTMl = "";
			}
}