Sweetalerts - How to add validation in Chaining modals (queue) inputs on each step

Question

I am trying to add input fields in chaining modals (queue) using sweet alerts.

Reference http://www.inetcnx.net/sweetalert/index.html#chaining-modals

Problem: I want to add validation on each input field. Lets say; to make it required field, therefore user must need to enter value in input before proceeding to next step.

Code:

$('body').on('click','.apt_action',function() {
swal.setDefaults({
      input: 'text',
      confirmButtonText: 'Next →',
      showCancelButton: true,
      animation: true,
      progressSteps: ['1', '2', '3']
    })

    var steps = [
      {
        title: 'Customer Name', 
       inputId: "customer_name",
       inputPlaceholder: "Write something"
      },
      {
        title: 'Sales Person',
        text: 'Product sold by?'
      },
      { 
        title: 'Additional Details',
        text: 'Coments or additional notes'
      }, 

    ]

    swal.queue(steps).then(function (result) {
      swal.resetDefaults()
      swal({
        title: 'All done!',
        html:
          'Your answers: <pre>' +
            (result) +
          '</pre>',
        confirmButtonText: 'Lovely!',
        showCancelButton: false
      })
    }, function () {
      swal.resetDefaults()
    })
    });

Js Fiddle :https://jsfiddle.net/mvohq23z/3/

Answer 1

Just add a preConfirm function block at each step you want to validate and do the validation using the variable value as you wish. Call the resolve() method for success or the reject('text error description here') to display an error message and prevent the chain modal to proceed to the next step.

Here's an example using your code in order to make all the input fields required:

JSfiddle here: https://jsfiddle.net/davidtoledo/ymb38u6t/1

        swal.setDefaults({
            input: 'text',
            confirmButtonText: 'Next →',
            showCancelButton: true,
            animation: true,
            progressSteps: ['1', '2', '3']
        });

        var steps = [
            {
                title: 'Customer Name',
                inputId: "customer_name",
                inputPlaceholder: "Write something",
                preConfirm: function(value)
                {
                    return new Promise(function(resolve, reject)
                    {
                        if (value) {
                            resolve();
                        } else {
                            reject('Please type something in the step 1!');
                        }
                    });
                }
            },
            {
                title: 'Sales Person',
                text: 'Product sold by?',
                preConfirm: function(value)
                {
                    return new Promise(function(resolve, reject)
                    {
                        if (value) {
                            resolve();
                        } else {
                            reject('Please type something in the step 2!');
                        }
                    });
                }

            },
            {
                title: 'Additional Details',
                text: 'Coments or additional notes',
                preConfirm: function(value)
                {
                    return new Promise(function(resolve, reject)
                    {
                        if (value) {
                            resolve();
                        } else {
                            reject('Please type something in the step 3!');
                        }
                    });
                }
            },

        ];

        swal.queue(steps).then(function (result) {
            swal.resetDefaults();
            swal({
                title: 'All done!',
                html:
                    'Your answers: <pre>' +
                    (result) +
                    '</pre>',
                confirmButtonText: 'Lovely!',
                showCancelButton: false
            })
        }, function () {
            swal.resetDefaults()
        });

Cheers,

David Costa