javascript-滑动滑块-在移动到下一张幻灯片之前验证输入

haketest lv.1

发布时间：2022-08-20 21:47:10 212

相关标签： # 前端

我正在使用swiper滑块构建一个多步骤问卷，每张幻灯片上都有不同的问题。在转到下一张幻灯片/问题之前，我很难验证用户是否提供了答案。

我试图将验证函数连接到beforeSlideChangeStart和beforeTransitionStart事件。这个beforeSlideChangeStart事件似乎只发生一次；仅适用于第一张幻灯片。这个beforeTransitionStart

我阅读了整个Events API，但没有找到合适的事件/解决方案。有人能给我指引一下正确的方向吗？

非常感谢。

const swiper = new Swiper(".swiper", {
    direction: "vertical",
    slidesPerView: 1,
    mousewheel: true,
    speed: 700,
});

document.querySelector(".swiper-slide-active button").onclick = function () {
    swiper.slideNext();
};

swiper.on("beforeSlideChangeStart", function () {
    this.allowSlideNext = is_valid();
    if (!is_valid()) alert("invalid answer");
});

function is_valid() {
    return document.querySelector(".swiper-slide-active input").value.length > 0;
}

.swiper {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    background-color: #fff;
}





  
      
          
              Question #1
              
              
          
      
      
          
              Question #2
              
              
          
      
      
          
              Question #3

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。