JSFiddle - React, Tailwind, and code Playground

HTML

<form action="envia.php" method="post" id="form1">
    <input type="text" name="nome" id="nome" class="name" value="Nome" onFocus="if(this.value =='Nome' ) this.value=''" onBlur="if(this.value=='') this.value='Nome'">
    <input type="text" name="email" id="email" class="email" value="Email" onFocus="if(this.value =='Email' ) this.value=''" onBlur="if(this.value=='') this.value='Email'">
    <input type="text" name="ddd" id="ddd" class="ddd" value="DDD" onFocus="if(this.value =='DDD' ) this.value=''" onBlur="if(this.value=='') this.value='DDD'" maxlength="3">
    <input type="text" name="telefone" id="telefone" class="telefone" value="Telefone" onFocus="if(this.value =='Telefone' ) this.value=''" onBlur="if(this.value=='') this.value='Telefone'" maxlength="9">
    <p></p>
    <p><strong>Escolha a Data do Evento:</strong>

    </p>
    <select name="dia" id="dia" class="dia">
        <option selected value="Dia">Dia</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option...

CSS

.hide {
    display: none;
}
.mostrar {
    display: block !important;
}

JavaScript

function validaform(form1) {
    if (form1.nome.value == 'Nome') {
        alert("O Campo Nome é Obrigatório!");
        return false;
    }
    if (form1.email.value == 'Email') {
        alert("O Campo Email é Obrigatório!");
        return false;
    }
    if (form1.email.value.indexOf(('@' && '.'), 0) == -1) {
        alert("Email Inválido.");
        return false;
    }
    if (form1.ddd.value == 'DDD') {
        alert("O Campo DDD é Obrigatório!");
        return false;
    }
    if (isNaN(form1.ddd.value)) {
        alert("O Campo DDD Deve Conter Apenas Números!");
        form1.ddd.focus();
        return false;
    }
    if (form1.telefone.value == 'Telefone') {
        alert("O Campo Telefone é Obrigatório!");
        return false;
    }
    if (isNaN(form1.telefone.value)) {
        alert("O Campo Telefone Deve Conter Apenas Números!");
        form1.telefone.focus();
        return false;
    }
    if (form1.dia.value == 'Dia') {
        alert("O Campo Dia é Obrigatório!");
        return false;
    }
    if (form1.mes.value == 'Mês') {
        alert("O Campo Mês é Obrigatório!");
        return false;
    }
    if (form1.ano.value == 'Ano') {
        alert("O Campo Ano é Obrigatório!");
        return false;
    }
    if (form1.temas.value == 'Temas Disponíveis') {
        alert("O Campo Temas Disponíveis é Obrigatório!");
        return false;
    }
    return true;
}
var selectTemas = document.getElementById('temas');
var divChabebe = document.querySelector('div[data-name="chabebe"]');
selectTemas.addEventListener('change', function () {
    var escolhido = this.options[this.selectedIndex].dataset.section;
    divChabebe.classList[escolhido == 'chabebe' ? 'add' : 'remove']('mostrar');
});