Sweetalerts - Как добавить проверку в входные данные модальных цепочек (очереди) на каждом шаге - PullRequest
Новая
       12

Sweetalerts - Как добавить проверку в входные данные модальных цепочек (очереди) на каждом шаге

0 голосов
/ 13 октября 2018

Я пытаюсь добавить поля ввода в цепочечные модалы (очереди), используя сладкие оповещения.

Ссылка http://www.inetcnx.net/sweetalert/index.html#chaining-modals

Проблема: Я хочу добавить проверку накаждое поле ввода.Давайте скажем;чтобы сделать это обязательным полем, пользователь должен ввести значение во ввод, прежде чем перейти к следующему шагу.

Код: 

<code>$('body').on('click','.apt_action',function() {
swal.setDefaults({
      input: 'text',
      confirmButtonText: 'Next &rarr;',
      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) +
          '
', verifyButtonText:' Lovely! ',showCancelButton: false})}, function () {swal.resetDefaults ()})});

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

1 Ответ

0 голосов
/ 20 декабря 2018

Просто добавьте блок preConfirm function на каждом шаге, который вы хотите проверить, и выполните проверку, используя переменную value , как вы хотите.Вызовите метод resol () для успеха или reject («текстовое описание ошибки здесь») , чтобы отобразить сообщение об ошибке и не дать модальной цепочке перейти к следующему шагу.

Вот пример использования вашего кода для того, чтобы сделать все поля ввода обязательными:

JSfiddle здесь: https://jsfiddle.net/davidtoledo/ymb38u6t/1

<code>        swal.setDefaults({
            input: 'text',
            confirmButtonText: 'Next &rarr;',
            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) +
                    '
', verifyButtonText:' Lovely! ', ShowCancelButton: false})}, function () {swal.resetDefaults ()});

Приветствия,

Дэвид Коста

...