表单提交时非激活标签页内字段未触发验证的问题求助

各位大佬好，我现在碰到个表单验证的难题，折腾半天没解决，来请教大家了😅

我想实现的是如图所示的表单验证效果：
目标验证效果

但现在提交表单的时候，发现只有当前激活标签页里的字段会触发验证，非激活标签页的字段完全没反应，而且控制台还弹出了错误：
控制台错误提示

我目前用的代码如下：

JavaScript代码 #

function prueba(){
    console.log("hola")
}

$("#boton").off("click").on("submit", function (event) {
    event.preventDefault();
    prueba();
});

CSS代码 #

.tabset > input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.tabset .tab-panel {
    display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3) {
    display: block;
}

（CSS只贴了标签页切换的核心样式，其他是基础布局类的代码）

有没有大佬能指点下，为啥非激活标签页的字段不会被验证？要怎么改才能让提交表单时，所有标签页里的表单字段都能触发验证呀？

备注：内容来源于stack exchange，提问作者Jorge Mantilla