Sweetalert2: Question: Is there support for multiple input fields?

[S-Hodgson-MMOARgames]

I was just curious if sweet alert 2 supported multiple input fields, or do I need to queue up a bunch of alerts to handle each one by one?

[toverux]

That's not directly supported by SweetAlert (because we keep things simple), but you can do it by writing the HTML yourself.

From the documentation:

Multiple inputs aren't supported, you can achieve them by using html and preConfirm parameters.
Inside the preConfirm() function you can pass the custom result to be returned

const {value: formValues} = await swal({
  title: 'Multiple inputs',
  html:
    '<input id="swal-input1" class="swal2-input">' +
    '<input id="swal-input2" class="swal2-input">',
  focusConfirm: false,
  preConfirm: () => {
    return [
      document.getElementById('swal-input1').value,
      document.getElementById('swal-input2').value
    ]
  }
})

[S-Hodgson-MMOARgames]

Thanks for the quick reply.

[typicalcoda]

Thanks for this.

[MoussaOudihat]

How can i set the html input required in sweetalert2

[gverni]

@MoussaOudihat have a look to this. If it doesn't answer your question, please raise a new question on stackoverflow.

[rosaiph]

olá

[rosaiph]

Isso não é diretamente suportado pelo SweetAlert (porque mantemos as coisas simples), mas você pode fazê-lo escrevendo o HTML sozinho.

Da documentação :

Múltiplas entradas não são suportadas, você pode alcançá-las usando htmle preConfirmparâmetros.
Dentro da função preConfirm () você pode passar o resultado personalizado para ser retornado

const {valor :  formValues } =  espera  swal ({
  título :  ' Múltiplos insumos ' ,
  html : 
    ' <input id = "entrada-swal1" classe = "entrada-swal2"> '  + 
    ' <entrada id = "entrada-swal2" classe = "entrada-swal2"> ' ,
  focusConfirm :  false ,
   preConfirm : () => {
     return [
       documento . getElementById ( ' swal-input1 ' ). valor ,
       documento . getElementById ( ' swal-input2 ' ). valor
    ]
  }
})

usei desta forma mas os meus inputs não aparecem, pode me ajudar ?

[gverni]

Hi @rosaiph, can you translate your comment in english please?

[taxpayer]

@rosaiph O idioma padrão para dúvidas e outras perguntas neste repositório é o inglês. Mande suas dúvidas em inglês ou então procure ajuda no Stackoverflow em português por tag: https://pt.stackoverflow.com/questions/tagged/sweetalert

@gverni "The standard language for doubts and other questions in the repo is English. Send your doubts in English or look for help in Stackoverflow in Portuguese using a tag: https://pt.stackoverflow.com/questions/tagged/sweetalert" ;-)

[rosaiph]

good afternoon,

I have this sweetalert and I need to apply a validation to not let pass my inputs empty, but I do not know but what to do already tried jquery validate everything but it does not work can help me follow my Swal

 swal.fire (
                {title: "End Event!",
                animation: true,
                customClass: 'bounceInDown',
                showCancelButton: true,
                confirmButtonText: "Confirm",
                html: "<form id = 'formValidate' class = 'formValidate'> Write a resolution to end Event" +
                        "<input id = 'resolution' name = 'resolution' type = 'text' class = 'form_input' required minlenght = '2' placeholder = 'Describe why you are finalizing this event' 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 & nbsp "
                        "<input id = 'end_time' name = 'end_time' type = 'text' class = 'form_input' required placeholder = 'Time' 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]
                   }
               })

[rosaiph]

I have a simulator. https://codepen.io/anon/pen/OqVqaN

[gverni]

Hi @rosaiph could you raise your question as an issue on https://github.com/sweetalert2/sweetalert2-examples? I'm going to help you there

[gverni]

@rosaiph I created an example of custom form validation here

[rosaiph]

Oi @rosaiph você poderia levantar sua questão como um problema em https://github.com/sweetalert2/sweetalert2-examples ? Eu vou te ajudar lá

Hello,

How do I use this to ask for help in this tool that you told me?

[rosaiph]

@rosaiph Eu criei um exemplo de validação de formulário personalizado aqui

Hello,

Thank you, I'll see your example!

[gverni]

Thanks @rosaiph. If you have any doubts with the example, then please just raise an issue on that repository (not this one)

[rosaiph]

Thank you so much, it saved my day.