JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "onblur-callme">
<form action="#" method="post" id="test" name="form1">
 
    <fieldset>
        <legend>Contact information</legend>
        <table>
            <tr>
                <td>
            <td>
 
            <li>
                <label for="name">Name:</label>
                <input type="text" name="name" id="name" />
            </li>
 
            <li>
                <label for="name">Surname:</label>
                <input type="text" name="surname" id="surname" />
            </li>
 
            <li>
                <label for="name">Lastname</label>
                <input type="text" name="lastname" id="lastname" />
            </li>
            </td>
            <td>
            <li>
                <label for="email">Email:</label>
                <input type="text" name="email" id="email" />
 
            </li>
            <li>
                <label for="pass">Password:</label>
                <input type="text" name="pass" id="pass" />
            </li>
            </td>
 
            </ul>
            </tr>
        </table>
 
        <p><input type="submit" name="send" id="send" value="Send" /></p>
    </fieldset>
    <br>
    <table>
        <tr>
            <td>
                <fieldset>
                    <div id = "flags" onchange="checks()">
                        <legend>Producer</legend>
                        <li>
                        <input type="checkbox" name = "checkbox1" id = "check1" value="Volswagen"> Volswagen
                        </li>
                        <li>
                        <input type="checkbox" name = "checkbox1" id = "check2" value="Hyundai">Hyundai
                        </li>
                        <li>
                        <input type="checkbox" name = "checkbox1" id = "check3" value="Vaz"> Vaz
                        </li>
                        <li>
                        <input...

JavaScript

var Validator = function(form) {
    this.form = $(form);
 
 
    function Callme() {
 
        for (var i in Elements) {
 
            var type = i;
            var validation = Elements[i];
 
            switch (type) {
 
                case 'name':
                    if (!validation.reg.test(validation.selector.val())) {
                        document.getElementById("name").placeholder = 'Not a valid name.';
                    }
                    else {
                        det1[1] = document.getElementById('name').value + '\n';
                        var str = det1.join(' ');
                        //document.getElementById('text').value = str;
                    }
                    break;
                case 'email':
                    if (!validation.reg.test(validation.selector.val())) {
                        document.getElementById("email").placeholder = 'Not a valid e-mail address';
                    }
                    else {
                        det1[7] = document.getElementById('email').value + '\n';
                        var str = det1.join(' ');
                        //document.getElementById('text').value = str;
                    }
                    break;
 
                case 'surname':
                    if (!validation.reg.test(validation.selector.val())) {
                        document.getElementById("surname").placeholder = 'Not a valid surname.';
                    }
                    else {
                        det1[3] = document.getElementById('surname').value + '\n';
                        var str = det1.join(' ');
                    }
                    break;
 
                case 'lastname':
                    if (!validation.reg.test(validation.selector.val())) {
                        document.getElementById("lastname").placeholder = 'Not a valid lastname';
                    }
                    else {
                        det1[5] = document.getElementById('lastname').value +...