Sweetalert2 multiple input validation - validation

Question

I'm trying to have multiple forms inside mutiple modals, as I've read I have to use swal.mixin with queue, all of these forms have multiple inputs inside.
I've already done that, but can't find a way to validate all of these forms, any sugestion?
Here's my code:
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(),
];
},
}

Answer 1

On sweetalert2 the inputValidator function is not called if the modal doesn't have any input defined.
A way to workaround that in your case is to add the input in the mixin but then hide it using onBeforeOpen.
Basically the mixin becomes:
swal.mixin({
confirmButtonText: 'Siguiente',
buttonsStyling: false,
input: 'text'
})
And then you add the following code to each element in the queue array to hide the input text:
onBeforeOpen: function (dom) {
swal.getInput().style.display = 'none';
}
You can see an implementation of that using your code here: https://codepen.io/anon/pen/xQxWMN

Answer 2

I have two at the same time. I wanted to extract number and checkbox input. But I could not get any specific answer regarding its release. After a lot of research, I developed my own version that you might find useful.
Swal.fire({
title : "Ball Adding",
html :
'<input class="swal2-input" id="rating-number" placeholder="Qo`shiladigan ballni yozing" type="number" style=" width: 80%; ">' +
'<label for="rating-checkbox" class="swal2-checkbox" style="display: flex;">' +
'<input type="checkbox" value="1" id="rating-checkbox">' +
'<span class="swal2-label">Chempionat baliga ham qo`shilsin</span>' +
'</label>',
showCancelButton : true,
confirmButtonText : "Qo'shish",
cancelButtonText : 'Bekor qilish',
showLoaderOnConfirm: true,
preConfirm : () => {
console.log('Rating: '+ parseInt(document.getElementById('rating-number').value))
console.log('Checkbox: '+document.getElementById('rating-checkbox').checked)
return parseInt(document.getElementById('rating-number').value)
},
allowOutsideClick : () => !Swal.isLoading()
}).then((result) => {
if (result.isConfirmed) {
console.log(result.value+' rating add')
}
})
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
I wrote a function for a project in Nuxtjs to update users score. The code of this function.
ratingAdd() {
Swal.fire({
title : "Ball qo'shish",
html :
'<input class="swal2-input" id="rating-number" placeholder="Qo`shiladigan ballni yozing" type="number" style=" width: 80%; ">' +
'<label for="rating-checkbox" class="swal2-checkbox" style="display: flex;">' +
'<input type="checkbox" value="1" id="rating-checkbox">' +
'<span class="swal2-label">Chempionat baliga ham qo`shilsin</span>' +
'</label>',
showCancelButton : true,
confirmButtonText : "Qo'shish",
cancelButtonText : 'Bekor qilish',
showLoaderOnConfirm: true,
preConfirm : () => {
return this.$axios.post('user/rating-change-aaa', {
user_id : parseInt(this.user_id),
rating : parseInt(document.getElementById('rating-number').value),
checkbox: document.getElementById('rating-checkbox').checked
});
},
allowOutsideClick : () => !Swal.isLoading()
}).then((result) => {
if (result.isConfirmed) {
this.SwalMixin(result.value.data.data.message, 'success')
this.getUserInfo()
}
});
},