JSFiddle - React, Tailwind, and code Playground

HTML

<form id="contact_form" name="contact_form" method="post" action="script_name.php">
    <input type="text" placeholder="Nome e cognome" name="name" id="name" value="Name" style="width:290px">
    <br>
    <br>
    <input type="text" placeholder="Azienda" name="azienda" id="azienda" value="Azienda" style="width:290px">
    <br>
    <br>
    <input type="text" placeholder="CittĂ " name="citta" id="citta" value="Citta" style="width:290px">
    <br>
    <br>
    <input type="text" placeholder="Recapito telefonico" name="telefono" id="telefono" value="Tel" style="width:290px">
    <br>
    <br>
    <input type="text" placeholder="Email" name="email" id="email" value='Email' style="width:290px">
    <br>
    <br>
    <input type="text" placeholder="Tipo di evento" name="evento" id="evento" value="Evnto" style="width:290px">
    <br>
    <br>
    <input type="text" placeholder="Numero di invitati stimato" name="invitati" id="invitati" value="Invitati" style="width:290px">
    <br>
    <br>
    <textarea placeholder="Descrizione" style="max-width:600px;max-height:400px;width:290px;height:200px" name="message" id="message">
    </textarea>
    <br>
    <br>
    <div id="boingdiv" style="width:300px;position:relative;">
        <input type="checkbox" name="checkbox" id="checkbox" />
        <small> Ho preso visione dell'
            <a style="color:#b40734" href="images/contatti/informativa.pdf" target="_blank">
                informativa
            </a>
        </small>
    </div>
    <br>
    <br>
    <input id="submit_it" type="button" value="Invia">
</form>

JavaScript

arrValidate = ['name','azienda','citta','telefono','email','evento','invitati','message']

$(document).ready(function() {

    $('#submit_it').click(function() {
        var nextFld, i ;
        
        //Validate the checkbox:
        if ( $('#checkbox').is(':checked') == false ) {
            alert('You must read the informativa and check the checkbox at bottom of form');
            boing();
            return false;
        }
        
        //Validate the rest of the fields
        for (i=0; i<arrValidate.length; i++){
            nextFld = arrValidate[i];
            if ( $.trim($('#'+nextFld).val()) == '') {
                alert('Please complete all fields. You missed the ['  +nextFld+ '] field.');
                $('#'+nextFld).css({'border':'1px solid red','background':'yellow'});
                $('#'+nextFld).focus();
                return false;
            }
        }

        //if it gets here, all is okay: submit!
        $('form#contact_form').submit();
    }); //END submit button click event
    
    //Remove any css validation coloring
    $('input:not([type=button])').blur(function(){
        $(this).css({'border':'1px solid lightgrey','background':'white'});
    });
    //Remove any background coloring from checkbox div
    $('#checkbox').click(function() {
        $('#boingdiv').css({'background':'white'});
    });
    //Remove existing value/text upon entry into field
    $('input:not([type=button]').focus(function() {
        $(this).val('');
    });
   
}); //END document.ready

function boing(){
    $('#boingdiv')
        .css({'background':'wheat'})
		.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
		.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
		.animate({ left: "0px" }, 100)
		.focus();
}