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（'文本错误描述此处'）以显示错误消息并阻止链模式继续进行下一步。

以下是使用您的代码以使所有输入字段都必填的示例：

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-如何在每个步骤的链接模式（队列）输入中添加验证

1 个答案: