JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<form action="#" method="post" id="form">
    <ul id="fields">
        <li><label for="name">Name</label>
            <input type="text" name="name" id="name" />
        </li>
        <li><label for="email">E-mail</label>
            <input type="text" name="email" id="email" />
        </li>
        <li><label for="username">Username</label>
            <input type="text" name="username" id="username" />
        </li>
        <li><label for="password">Password</label>
            <input type="text" name="password" id="password" />
        </li>
    </ul>
<p><input type="submit" name="submit" id="submit" value="Send" /></p>
</form>

CSS

#form {
    padding: 1em;
    margin: 0 auto;
    width: 70%;
    font: 100% Arial, sans-serif;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    margin-bottom: 1em;
    overflow: hidden;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #999;
}

label {
    float: left;
    width: 6em;
    padding-right: 0.3em;
    padding-top: 0.3em;
    font-variant: small-caps;
    font-weight: bold;
}

li input {
    float: left;
    width: 10em;
    border: 1px solid #999;
    font: 1em Arial, sans-serif;
}



p input {
    display: inline-block;
    margin-top: 0.5em;
    padding: 0.2em 1em;
    background: #000;
    color: #fff;
    border: 1px solid #999;
    border-radius: 12px;
    font: 1.1em Arial, sans-serif;
}


.error {
    float: left;
    padding: 0.3em 0 0 0.5em;
    color: red;
}

JavaScript

var Validator = {
    inputs: $(':input', '#fields'),
    
    check: function() {
        this.inputs.each(function() {
            var $input = $(this);
            $input.blur(function() {
                if(this.value == '') {
                    $('<span class="error"/>').text('Error').insertAfter($input);
                }
                
            });
            
        });
        
    },
    
    submit: function() {
        
        $('#form').submit(function(e) {
            
            if($('.error', '#form').length) {
                $('.error', '#form').remove();
            }
        
            Validator.inputs.trigger('blur');
            
            if($('.error', '#form').length) {
                
                e.preventDefault();
                
            }
                
            
        });
    },
    
    init: function() {
        
        this.check();
        this.submit();
    }
    
};

Validator.init();