我正在尝试在多态模态中使用多种形式,因为我已经读到必须在队列中使用swal.mixin
,所有这些形式内部都具有多种输入。
我已经这样做了,但是找不到任何建议来验证所有这些表格的方法吗?
这是我的代码:
swal.mixin({
confirmButtonText: 'Siguiente',
buttonsStyling: false,
}).queue([
{
html:
"<form class='formulario' action='' method='post'>" +
"<div class='fila'>"+
"<img src='src/images/svg/icons/person.svg' class='imagen'/>"+
"<input id='name' class='espacio-datos' name='nombre' type='text' placeholder='Nombre' maxlength='20' required>" +
"</div>"+
"<div class='fila'>"+
"<img src='src/images/svg/icons/id.svg' class='imagen'/>"+
"<input id='ced' class='espacio-datos' name='num_ident' type='text' placeholder='Cedula' onkeypress='onlyNumbers(event)'>" +
"</div>"+
"<div class='fila'>"+
"<img src='src/images/svg/icons/phone.svg' class='imagen'/>"+
"<input id='tlf' class='espacio-datos' name='num_telef' type='text' placeholder='Telefono' onkeypress='onlyNumbers(event)'>" +
"</div>"+
"</form>",
preConfirm: function () {
var array = {
'nombre' : $("#name").val(),
'cedula' : $("#ced").val(),
'telefono' : $("#tlf").val(),
}
return array;
},
},
{
html:
"<form action='' method='post'>" +
"<div class='main-cont'>"+
"<span>" +
"Por favor ingresa el codigo de verificacion NUIP "+
"que hemos enviado a tu celular" +
"</span>"+
"<div class='row cuadros'>" +
"<input id='num-1' class='inp-num' data-pos='0' type='text' maxlength='1' name='one' onkeypress='isInputNumber(event)' autofocus='autofocus'/>" +
"<input id='num-2' class='inp-num' data-pos='1' type='text' maxlength='1' name='two' onkeypress='isInputNumber(event)'>" +
"<input id='num-3' class='inp-num' data-pos='2' type='text' maxlength='1' name='three' onkeypress='isInputNumber(event)'>" +
"<input id='num-4' class='inp-num' data-pos='3' type='text' maxlength='1' name='four' onkeypress='isInputNumber(event)'>" +
"</div>" +
"</div>"+
"</form>",
preConfirm: function () {
return [
$("#num-1").val(),
$("#num-2").val(),
$("#num-3").val(),
$("#num-4").val(),
];
},
}
答案 0 :(得分:1)
在sweetalert2上,如果模式未定义任何inputValidator
,则不会调用input
函数。
一种解决此情况的方法是在混入中添加input
,然后使用onBeforeOpen
隐藏它。
基本上,mixin变为:
swal.mixin({
confirmButtonText: 'Siguiente',
buttonsStyling: false,
input: 'text'
})
然后将以下代码添加到队列数组中的每个元素以隐藏输入文本:
onBeforeOpen: function (dom) {
swal.getInput().style.display = 'none';
}
您可以在此处使用代码查看实现:https://codepen.io/anon/pen/xQxWMN