SweetAlert prompt with two input fields

Using the example posted by Tikky in their answer above and based on the question asked for validation on that answer. You could possibly try the following to implement validation on this method:

swal({
            title: 'Multiple inputs',
            html:
                '<input id="swal-input1" class="swal2-input">' +
                '<input id="swal-input2" class="swal2-input">',
            preConfirm: function () {
                return new Promise(function (resolve) {
                    // Validate input
                    if ($('#swal-input1').val() == '' || $('#swal-input2').val() == '') {
                        swal.showValidationMessage("Enter a value in both fields"); // Show error when validation fails.
                        swal.enableConfirmButton(); // Enable the confirm button again.
                    } else {
                        swal.resetValidationMessage(); // Reset the validation message.
                        resolve([
                            $('#swal-input1').val(),
                            $('#swal-input2').val()
                        ]);
                    }
                })
            },
            onOpen: function () {
                $('#swal-input1').focus()
            }
        }).then(function (result) {
            // If validation fails, the value is undefined. Break out here.
            if (typeof(result.value) == 'undefined') {
                return false;
            }
            swal(JSON.stringify(result))
        }).catch(swal.noop)

You can have inputs in the default SweetAlert type, as long as you set the html property to true. The issue is that unless the type is set to "input", SweetAlert adds a display: none to input fields.

It's a bit of a workaround, but you can change this in the js file from

<input type=\"text\" tabIndex=\"3\" />\n

to

<input id=\"swalInput\" type=\"text\" tabIndex=\"3\" />\n

And change the css file from

.sweet-alert input {

to

.sweet-alert #swalInput {

Then you can simply add your html to the text parameter when calling, like so:

swal({
    title: "Log In to Continue",
    html: true,
    text: "Username: <input type='text'><br>Password: <input type='password'>"
});

This method simply specifies that the only input to be styled that way is the one generated by SweetAlert, so that any inputs you add to your text won't be affected by that styling.

Multiple inputs aren't supported, you can achieve them by using HTML and preConfirm parameters. Inside the preConfirm() function you can return (or, if async, resolve with) the custom result:

function sweetAlert(){
  (async () => {

  const { value: formValues } = await Swal.fire({
    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
      ]
    }
  })

  if (formValues) {
    Swal.fire(JSON.stringify(formValues))
  }

  })()
}

body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>


<button onclick="sweetAlert()">Try me!</button>

Source: INPUT TYPES

Now SweetAlert2 is available: https://sweetalert2.github.io

As per their info on bottom:

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 the resolve() function as a parameter:

swal({
  title: 'Multiple inputs',
  html:
    '<input id="swal-input1" class="swal2-input">' +
    '<input id="swal-input2" class="swal2-input">',
  preConfirm: function () {
    return new Promise(function (resolve) {
      resolve([
        $('#swal-input1').val(),
        $('#swal-input2').val()
      ])
    })
  },
  onOpen: function () {
    $('#swal-input1').focus()
  }
}).then(function (result) {
  swal(JSON.stringify(result))
}).catch(swal.noop)