Sweetalerts - 如何在每个步骤的链接模式（队列）输入中添加验证

Question

我正在尝试使用甜蜜警报在链接模态（队列）中添加输入字段。

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

问题：我想在每个输入字段上添加验证。让我们说;使其成为必填字段，因此用户必须在继续下一步之前在输入中输入值。

代码：

$('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) +
          '</pre>',
        confirmButtonText: 'Lovely!',
        showCancelButton: false
      })
    }, function () {
      swal.resetDefaults()
    })
    });

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

Answer 1

只需在要验证的每个步骤添加一个 preConfirm 函数 块，并根据需要使用变量 value 进行验证。成功调用 resolve() 方法或调用 reject('text error description here') 显示错误消息并阻止链模式继续到下一步。

这是一个使用您的代码以使所有输入字段都成为必填项的示例：

JSfiddle 在这里：https://jsfiddle.net/davidtoledo/ymb38u6t/1

        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) +
                    '</pre>',
                confirmButtonText: 'Lovely!',
                showCancelButton: false
            })
        }, function () {
            swal.resetDefaults()
        });

干杯，

大卫·科斯塔

Sweetalerts - 如何在每个步骤的链接模式（队列）输入中添加验证

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

javascript

sweetalert