JSFiddle - React, Tailwind, and code Playground

by BrOsCoRe

HTML

<!doctype html>
<html lang="en">

<head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/register.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <!-- Poppins Font -->
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>

<body>
    <!-- REGISTER MENU -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 px-0 py-0">
                <img src="img/reg_img.png" class="img-fluid" alt="">
            </div>
            <div class="col-md-6 ">
                <div class="form-side px-5 py-5">
                    <div class="form-side-title text-center mb-5">
                        <i class="fab fa-dribbble fa-2x"></i>

                        <h1>Join our community!</h1>
                        <p class="text-muted">Already have an account? <a href="#">Login</a></p>
                        <div class="form-group">
                            <button id="face" type="click" class="btn btn-primary"><i class="fab fa-facebook-square"></i>&nbsp;Join via facbook</button>
                        </div>

                    </div>
                    <form id="regForm">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="firstName">First Name</label>
                                <i id="emoji"></i>
                                <input type="text" name="First...

CSS

.form-side {
    margin: 20% 15% 0 15%;
}

#subBtn,
#face {
    width: 100%;
}

a {
    color: #000;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
}

JavaScript

const regForm = document.getElementById('regForm');
var validObjects = document.querySelectorAll('[customValidate]');
validObjects.forEach(function(element) {
    element.addEventListener('blur', function() {
        var emoji = element.previousElementSibling;
        var label = emoji.previousElementSibling;

        if (!element.value) {
            emoji.className = "far fa-frown float-right  text-danger";
            var span = document.createElement("span");
            span.innerHTML = "&emsp;* Required";
            span.style.color = "red";
            if (!label.getElementsByTagName("span")[0])
                label.appendChild(span);
            isValid = false;
            console.log(element.id + " empty");
        } else {
            emoji.className = "far fa-smile float-right  text-success";
            var span = label.getElementsByTagName("span")[0];
            if (span)
                label.removeChild(span);
            isValid = true;
            console.log(element.id + " filled");
        }

    });
});
regForm.addEventListener('submit', function(event) {
    event.preventDefault();
    var isValid = true;

    validObjects.forEach(function(element) {
       if(!(element.value)){
       	isValid = false;
       }
    })

    if (!isValid) {
        alert("empty!");
    } else {
        alert("success!");
    }
});