JSFiddle - React, Tailwind, and code Playground

by LCBradley3k

HTML

<div id="main">

<form name="signup" method="post">
    <div class="inputs">
        <span>Create a username</span>
    <input type="text" size=25>
        <span>Create a password</span>
    <input type="text" size=25>
        <span>Confirm your password</span>
    <input type="text" size=25>
        <span>Your email address</span>
    <input type="text" name="email" size=25>
        
    <input type="button" value="Join!" id="join">
        <div id="answer"></div>
        </div>
</form>
      
        </div>
        
        <!--<input type="button" value="slide" class="slideButton">-->

CSS

#main {
    position:relative;
    border: 1px solid #000;
    width:35%;
    height:700px;;
    top:-9px;
    left:-9px;
    background-color:rgb(240,240,240);
    border-bottom:none;
    border-right-color:#D8D8D8;
}

.inputs {
    margin-top:19px;
    margin-left:9px;
}

input {
    display:block;
    margin:0px 0px 12px 7px;
    height:30px;
    color:rgb(50,50,50);
    font-family:Arial,Helvetica,sans-serif;
    font-size:15px;
    border:1px solid rgb(190,190,190);
    border-radius:1px;
}

input:hover {
    border:1px solid rgb(170,170,170);
}

span {
    margin-left:7px;
    font-family:Arial,Helvetica,sans-serif;
}

input[type=button] {
    background-color:rgb(245,245,245);
}

.empty {
    border: 1px solid #f00;
}

#answer {
    position:relative;
    display:inline-table;
    top:-36px;
    left:70px;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
}

.slideButton {
    z-index:5;
    position:relative;
    display:inline;
    top:-500px;
    left:500px;
}

JavaScript

$(document).ready(function(){

        
      /*  setTimeout(function(){ 
        $('.inputs').show("slide", { direction: "down" }, 1000);
        }, 2000);
    });*/
    
    $('#join').click(function(){
        
        var correct = true;
        
        $('input[type="text"]').each(function(indx){
            var $currentField = $(this);
            if ($currentField.val() === ''){
                $currentField.addClass('empty');
                correct = false;
                $currentField.one('keydown',function(){
                    $currentField.removeClass('empty');
                });
            } else{
                $currentField.removeClass('empty');
            }
        
        });
        if (correct) {
            $('#answer').html('Thank You!');
            setTimeout(function(){
        $('.inputs').hide("slide", { direction: "up" }, 1000);
        }, 2000);
        } else {
        $('#answer').html('Please fill highlighted fields.') ;     
        }
        
        function validateForm()
{
    var x=document.forms["signup"]["email"].value;
    var atpos=x.indexOf("@");    
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  $('#answer').html('Not a valid email')
  return false;
  }
    });

       

});