Trigger function only when form data is all filled

Question

I created a radio form, which when filling the alternatives, when clicking on the Ubmit button, it sends the form data via AJAX to the PHP page applying the logic of how many questions were hit. The clicked button generates a div per popup with the return of PHP logic, showing how many hits were made. But by clicking the button even without filling all radios, it generates the empty div on the screen. All fields are with required.

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#questionario').submit(function(){
            var dados = jQuery( this ).serialize();

            jQuery.ajax({
                type: "POST",
                url: "teste.php",
                data: dados,
                success: function( data )
                {
                    $("#div1").html(data);
                    var modal1= document.getElementById('modal-wrapper1');
                window.onclick= function(event){
                  if(event.target==modal1){
                    modal1.style.display="none";
                  }
                }
                    
                }
            });
            
            return false;
        });
    });
    </script>

<section class="joguinho" style="background:#f2f2f2;">
<div class="container">
  
        <div class="col-md-12 justify-content-center d-flex">
        <h1 style="font-weight: 300;" class="mt-5">DESCUBRA</h1>
           </div>

           <div class="col-md-12 justify-content-center d-flex">
        <h1 style="color: #03be98;">SE VOCÊ TEM DTM</h1>
    </div>


<form action="" method="post" id="questionario">
 <div class="row">
        <div class="col-12 col-md-9"><h6>Sente dificuldade para abrir a boca?</h6></div>
    <div class="col-12 col-md-3 form-check text-left text-md-right">
        <input type="radio" name="questao1" id="questao1-1" value="Sim" required> Sim
        <input type="radio" name="questao1" id="questao1-2" value="Não" required> Não
    </div>
</div> <br>

 <div class="row">
        <div class="col-12 col-md-9"><h6>Sente dificuldade para movimentar a mandíbula para os lados?</h6></div>
    <div class="col-12 col-md-3 form-check text-left text-md-right">
        <input type="radio" name="questao2" id="questao2-1" value="Sim" required> Sim
        <input type="radio" name="questao2" id="questao2-2" value="Não" required> Não
    </div>
</div> <br>
<button type="submit" value="Enviar" style="background:#690d2e; color:white; font-weight: 600" class="btn" onsubmit="document.getElementById('modal-wrapper1').style.display='block'">GERAR RESULTADO</button>
</form>
</div>
<!--Formulario invisivel-->

          <div id="modal-wrapper1" class="modal">

        
                <div class="container justify-content-center d-flex align-self-center modal-content animate">
                     <div id="div1" class=" justify-content-center d-flex align-self-center form-row pt-2">

                     </div>  
                </div>
        
            
            </div>
</section>

Answer 1

You have things to improve in your code.

First is that you don’t need to put required on all radios. Just put in only 1 of those who have the same name, for example:

<input type="radio" name="questao1" id="questao1-1" value="Sim" required> Sim
<input type="radio" name="questao1" id="questao1-2" value="Não"> Não

Note that it was only put on the "Yes" radio. This will require you to mark one of the two options, as both have the same name.

You don’t have to put onsubmit on the Ubmit button. You already have a Event Handler .submit() and can show the div inside.

And instead of using window.onclick= function(event){ to hide the modal, you can simply use the method .one("click", function...) for this. This method enables the click on the div only once, that is, when AJAX enters the success the modal is enabled to receive a click and hide:

success: function( data )
{
   $("#div1").html(data);
   $("#modal-wrapper1").one("click", function(){
      $(this).hide();
   });
}

Also do not use <br> between the Ivs to give spacing. It is incorrect. You can use padding or margin for this in your CSS.

The complete code will look like this:

jQuery(document).ready(function(){
   jQuery('#questionario').submit(function(){
      $("#modal-wrapper1").show(); // mostra a modal
      var dados = jQuery( this ).serialize();

      jQuery.ajax({
         type: "POST",
         url: "teste.php",
         data: dados,
         success: function( data )
         {
            $("#div1").html(data);
            $("#modal-wrapper1").one("click", function(){
               $(this).hide(); // esconde a modal ao ser clicada
            });
         }
      });
      return false;
   });
});

HTML:

<section class="joguinho" style="background:#f2f2f2;">
   <div class="container">
      <div class="col-md-12 justify-content-center d-flex">
         <h1 style="font-weight: 300;" class="mt-5">DESCUBRA</h1>
      </div>

      <div class="col-md-12 justify-content-center d-flex">
         <h1 style="color: #03be98;">SE VOCÊ TEM DTM</h1>
      </div>

      <form action="" method="post" id="questionario">
         <div class="row">
            <div class="col-12 col-md-9"><h6>Sente dificuldade para abrir a boca?</h6></div>
            <div class="col-12 col-md-3 form-check text-left text-md-right">
               <input type="radio" name="questao1" id="questao1-1" value="Sim" required> Sim
               <input type="radio" name="questao1" id="questao1-2" value="Não"> Não
            </div>
         </div>
         <div class="row">
            <div class="col-12 col-md-9"><h6>Sente dificuldade para movimentar a mandíbula para os lados?</h6></div>
            <div class="col-12 col-md-3 form-check text-left text-md-right">
               <input type="radio" name="questao2" id="questao2-1" value="Sim" required> Sim
               <input type="radio" name="questao2" id="questao2-2" value="Não"> Não
            </div>
         </div>
         <button type="submit" value="Enviar" style="background:#690d2e; color:white; font-weight: 600" class="btn">GERAR RESULTADO</button>
      </form>
   </div>
   <!--Formulario invisivel-->
   <div id="modal-wrapper1" class="modal">
      <div class="container justify-content-center d-flex align-self-center modal-content animate">
         <div id="div1" class=" justify-content-center d-flex align-self-center form-row pt-2">
         </div>  
      </div>
   </div>
</section>