如何解决圆滑的表单验证问题

问题描述

我在引导模式中使用光滑滑块，在其中显示每个光滑的输入字段，但是当我验证它时，即使所有字段都已填充，它始终显示空字段，我看到当我按下光滑的下一个箭头按钮时，它首先显示为空的问题输入然后立即用我之前输入的内容填充它，如何解决这个问题

这是该问题的极简再现。

$(() => {
  $(".slick-products").slick({
    dots: true
  });
});

function test() {
  const result = $("form")[0].checkValidity()
    ? 'valid'
    : 'invalid';
  $('#output').html('');
  setTimeout(() => {
    $('#output').html(result);
  },500);
}

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width">
    <title>Test</title>
  </head>
  <body>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript" charset="utf-8"></script>

    <form>
      <div class="slick-products">
        <div>
          <input type="text" required />
        </div>
        <div><input type="text" required /></div>
      </div>
    </form>
    <button type="button" onclick="test()">Test</button><br/>
    Test result: <span id="output"></span>
  </body>
</html>

在输入框中输入一些文本，然后按“测试”按钮。我希望它测试为“有效”，但即使设置了唯一必需的输入，我也看到“无效”。

如果我删除第二个 <div><input type="text" required /></div> 以便滑块只有一项，它开始测试为“有效”。

解决方法

问题是默认情况下，光滑的滑块会尝试无限滚动。要做到这一点，它必须克隆滑块项目的另一个副本，以便在世界各地滑动时准备好移动到位（从最后到第一个或从第一个到最后一个向后）。滑块项的克隆副本包含另一个 true 元素，该元素仍然为空，因此表单无效。

看起来最简单的解决方法是通过添加将无限滚动设置为 false

package-lock.json

到光滑的配置对象。

<input required ...

infinite: false

如果您在两个输入框中输入文本（每个滑块项 1 个），然后单击“测试”按钮，则测试结果为“有效”。

html javascript jquery slick.js