sweetalert inputs

Question

good afternoon,

I have a swal with several inputs in the html tag and need to apply a validation that does not let pass empty fields already tried everything jquery validate etc and nothing.

goes down my swal:

swal.fire(
                {title: "Finalizar Evento!",
                animation: true,
                customClass:'bounceInDown',
                showCancelButton: true,
                confirmButtonText:"Confirmar",
                html:"<form id='formValidate' class='formValidate'>Escreva uma resolução para finalizar o Evento"+
                        "<input id='resolution' name='resolution'   type='text'   class='form_input'  required  minlenght='2'  placeholder='Descreva porque esta finalizando este evento' required  style='width: 80%; padding: 12px 20px;margin: 8px 0;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box; '/>" +"</br>" +
                        "<input id='date'         name='date'         type='text'   class='form_input'  required  placeholder='Data' required style='width: 38%;   height=40%; padding: 12px 20px;margin: 8px 0;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box; ' />" + "&nbsp&nbsp&nbsp&nbsp" +
                        "<input id='end_time'     name='end_time'     type='text'   class='form_input'  required  placeholder='Hora' required style='width: 38%; height=40%; padding: 12px 20px;margin: 8px 0; border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box; '/>" + 
                        "</form>",


                    preConfirm: () => {

                      resolution = document.getElementById('resolution').value;
                      date = document.getElementById('date').value;
                      end_time = document.getElementById('end_time').value;

                        return [ resolution , date, end_time]


                    }

                })

Answer 1

Can use a if to check if any of the fields are empty before returning array:

if(!resolution || !date || !end_time) return false;

If any of the fields is empty, it will return false and the modal will remain open:

swal.fire(
 {title: "Finalizar Evento!",
 animation: true,
 customClass:'bounceInDown',
 showCancelButton: true,
 confirmButtonText:"Confirmar",
 html:"<form id='formValidate' class='formValidate'>Escreva uma resolução para finalizar o Evento"+
         "<input id='resolution' name='resolution'   type='text'   class='form_input'  required  minlenght='2'  placeholder='Descreva porque esta finalizando este evento' required  style='width: 80%; padding: 12px 20px;margin: 8px 0;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box; '/>" +"</br>" +
         "<input id='date'         name='date'         type='text'   class='form_input'  required  placeholder='Data' required style='width: 38%;   height=40%; padding: 12px 20px;margin: 8px 0;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box; ' />" + "&nbsp&nbsp&nbsp&nbsp" +
         "<input id='end_time'     name='end_time'     type='text'   class='form_input'  required  placeholder='Hora' required style='width: 38%; height=40%; padding: 12px 20px;margin: 8px 0; border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box; '/>" + 
         "</form>",


     preConfirm: () => {

       resolution = document.getElementById('resolution').value;
       date = document.getElementById('date').value;
       end_time = document.getElementById('end_time').value;

      if(!resolution || !date || !end_time) return;

         return [resolution , date, end_time]


     }

 })